Nauseating Packaged Meat

    vue-swiper-layout

    1.0.9 • Public • Published

    vue-swiper-layout

    中文 | English

    npm npm vue2

    vue slide list component. vue 滑动列表组件

            

    安装

    npm install --save vue-swiper-layout
    

    使用

    全局注册

    import Vue from 'vue'
    import VueSwiperLayout from 'vue-swiper-layout'
     
    Vue.use(VueSwiperLayout)

    局部注册

    import { swiperLayout, swiperLayoutBox } from 'vue-swiper-layout'
     
    export default {
        components: {
            swiperLayout,
            swiperLayoutBox
        }
    }
     
    <swiper-layout-box> // 用来包裹 swiper-layout 的容器
        
      <swiper-layout
                    type="right" 
                    v-model="open"
                    menuHeight="60px" 
                    menuWidth="40%"
                    :swiperConfig="config"
                    @offset="offsetEvent"
                    offsetNumber="120">
        <template slot="content">
          <span>列表内容</span>
        </template>
        <template slot="menu">
          <span class="menu-item">功能菜单</span>
        </template>
      </swiper-layout>
        
    </swiper-layout-box>
                                                                                                                   
    属性名说明类型
    type菜单滑动的方式 String right | left | top | bottom
    v-model菜单是否打开 Boolean true 菜单打开, false 菜单关闭
    menuHeight整个列表的高度,当type为top或者bottom时候需要配置本参数 String例如: 50px
    swiperConfig本组件基于swiper3.4.2,详细配置见官方文档 Object http://3.swiper.com.cn/api/index.html
    @offset当滑动到菜单页,在继续滑动会触发offset事件/ /
    offsetNumber当滑动到菜单页,设置再滑动多少距离触发offset事件,单位pxNumber默认:120px

    问题

    1.关于样式

    本组件未提供任何样式,请根据需求自行定义样式

    2.用 v-for 循环,如何删除本组件?

    推荐使用 v-if 动态删除本组件,实例代码见 /test/test01.vue

    3.当一个菜单打开的时候怎么关闭其他菜单?

    实例代码见 /test/test02.vue

    更新

    • v1.0.9 解决了当 type = right 时候的滑动用户体验不好,和异常删除问题

    License

    MIT

    Install

    npm i vue-swiper-layout

    DownloadsWeekly Downloads

    10

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    1.15 MB

    Total Files

    22

    Last publish

    Collaborators

    • huaji-millent