实现如上图所示的内容,利用微信小程序自带的swiper标签,设置垂直滚动,原理就是这么简单,但是,如果需要动态加载数据呢?
<view class=‘flex news‘> <view class=‘news-left‘>头条</view> <swiper class=‘news-right‘ vertical="true" autoplay="true" interval="3000" circular="true"> <swiper-item> <navigator url=‘../news/news‘ class=‘news-content‘ wx:for="{{2}}">新闻标题</navigator> </swiper-item> </swiper> </view>
比如:我有n条数据,但现在是每次加载的是两条数据,那么需要创建多少个swiper-item呢?
通过一个小小的计算方式来实现,相信大家动一下脑筋就明白。
var swiperItem=function(length,item){
if(length%item==0){
return length / item;
}else{
return (length /item)+1;
}
}
module.exports = {
swiperItem:swiperItem //暴露该返回值
};
这个方法我是用在一个工具类中,我觉得在开发小程序的过程中,也可以尽量的做到封装和继承。比如:写一个工具类,将所有属于数据转化这类的方法可以封装在这个js文件中,然后通过引用,直接调用这个方法,免去了在page页面js中代码过多,不便于后面维护。由于接手的是已完成的项目,所以用的是js语法,没有用ts语法,学过Java或其他面向对象编程思想的同学,可以尝试用ts语法来开发小程序,好处就不多说了。
在index.js文件中引用该方
var util=require("../../../../utils/util.js");//引用
Page({
data{
barNum:0
}
onLoad: function(options) {
that.setData({ barNum:util.swiperItem(res.length,2) //res数据为向后台请求的数据,2是在每个swiper-item中显示的条数 }) } })
这样就可以知道可以分多少个swiper-item展示了,(wx:for="{{barNum}}")但是,在每个swi-item中要显示两条数据,那n条数据中,怎么一一对应插入到navigator中呢?
这里写一下总体思路吧:假如有10条数据,那肯定是分为5页显示了,那10条数据如何放入到navigator中呢?可以利用数组下标来表示:
newsList表示json数组,每条新闻标题可以表示为:newsList[0],newsList[1].....这样表示下去一直到newsList[9];
这个时候定义的barNum这个变量肯定是5,也就是说wx:for="{{5}}",下标index1为,0,1,2,3,4可以从这个下标入手,
还有另一个下标,那就是在navigator中的,wx:for="{{2}}",因为每次两条都是写死的,所以,每次的index2下标都是0,1
我的计算思路是这样的:下标=(index1*2)+index2,这样循环newsList数组的下标都是遵循0,1,2,3...的
具体代码入下;
<view class=‘flex news‘> <view class=‘news-left‘>头条</view> <swiper class=‘news-right‘ vertical="true" autoplay="true" interval="3000" circular="true"> <swiper-item wx:for="{{barNum}}" wx:for-index="idx1"> <navigator url=‘../news/news‘ class=‘news-content‘ wx:for="{{2}}" wx:for-index="idx2">{{topicList[(idx1*2)+idx2].title}}</navigator> </swiper-item> </swiper> </view>
当然,肯定会有 更好的计算分页方法,推算不易,不喜勿喷。。。。