vue-swiper-layout

中文 | English

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事件，单位px	Number	默认：120px

问题

1.关于样式

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

2.用 v-for 循环，如何删除本组件？

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

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

实例代码见 /test/test02.vue

更新

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

License

MIT