今天教大家写一下滑动菜单 我这里使用的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组件 是什么？
好了 就这样
