Vue swiper layout

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

Version: 1.0.9 Updated: 02/24/2018

By: huaji-millent License: MIT

Downloads Last 30 Days: 68

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

Categories: Vue js