微信小程序滑动菜单（swiper）

今天教大家写一下滑动菜单
我这里使用的mpvue的写法，基于vue语法开发的小程序框架。

明确思路
1 确定每页所需的数据 这里是10条
2 进行数据截取
3 进行渲染
下面给大家分享下代码 有不明白的可以私信我

1 数据
注意：我是用mpvue 所以数据直接放在了
data(){
return{
}
} 里

type: [
        {
          id: 0,
          name: '餐饮'
        },
        {
          id: 1,
          name: '零食烟酒'
        },
        {
          id: 2,
          name: '购物'
        },
        {
          id: 3,
          name: '住房'
        },
        {
          id: 4,
          name: '交通'
        },
        {
          id: 5,
          name: '娱乐'
        },
        {
          id: 6,
          name: '汽车'
        },
        {
          id: 7,
          name: '通讯'
        },
        {
          id: 8,
          name: '育儿'
        },
        {
          id: 9,
          name: '人情'
        },
        {
          id: 10,
          name: '医疗'
        },
        {
          id: 11,
          name: '旅行'
        },
        {
          id: 12,
          name: '投资'
        },
        {
          id: 13,
          name: '投资亏损'
        },
        {
          id: 14,
          name: '借出'
        },
        {
          id: 15,
          name: '还债'
        },
        {
          id: 16,
          name: '利息支出'
        },
        {
          id: 17,
          name: '其他'
        }
      ],
      newType: [

      ]

2 封装截取数组的方法

 created () {  // mpvue的create生命周期
    let a = (function (arr, length) { // 形参接收方才传入的值
      var _arr = []   // 定义一个新数组
      while (arr.length) { 循环总数据的长度
        _arr.push(arr.splice(0, length)) // 把截取到的数组push到_arr数组里
      }
      return _arr // 返回新的数组
    })(this.type, 10) // 传两个参数 this.type是所有数据 10是截取的个数 (我们要10条)
    this.newType = a // 新的数组直接赋值给在data里定义的空数组
    console.log(this.newType.length) // 这个length就是页数了
    console.log(this.newType) // 这个就是分好的数组
    // 这个方法的前提是必须掌握 数组的splice方法 就是截取数组 
	 [splice方法](http://www.w3school.com.cn/jsref/jsref_splice.asp)
  }

console.log(this.newType.length) // 这个length就是页数了
console.log(this.newType) // 这个就是分好的数组

3 渲染

<swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
	<block v-for="(item, index) in newType" :index="index" :key="key">
		<swiper-item class='swiper_item'>
			<div class='type_item' v-for="(v, i) in item" :index="i" :key="key"> 
				{{v.name}}
			</div>
		</swiper-item>
	</block>
</swiper>

简单来说就是
假如我有18条数据
那么我每个页面需要10条
又因为 一个页面是一个swiper-item 所以需要知道循环出两个swiper-item 这个咋们已近实现了
接着一个swiper-item里有10条 那么就必须要一个长度为10的数组 这个咋们刚才已经打印到了
咋们根据总数据截取除了两个数组 一个长度为10 一个为8 所以就有两个页面 第一个页是10条 第二个也就是8条
这时 你再去把总数=数据多加几条 页就会自己叠加…

看不懂的话去小程序官网看看这个swiper组件 是什么？

好了 就这样