小程序开发日志-7、动态加载上下滚动数据列表（小程序开发）

银白叹咏调 發表於 2019-6-12 23:47:00

小程序开发日志-7、动态加载上下滚动数据列表（小程序开发）

<img src="https://img2018.cnblogs.com/blog/1412174/201906/1412174-20190612213615692-1309400627.png">
 实现如上图所示的内容，利用微信小程序自带的swiper标签，设置垂直滚动，原理就是这么简单，但是，如果需要动态加载数据呢？
<div class="cnblogs_code">
<pre><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></pre>
</div>
 
比如：我有n条数据，但现在是每次加载的是两条数据，那么需要创建多少个swiper-item呢？
通过一个小小的计算方式来实现，相信大家动一下脑筋就明白。
<div class="cnblogs_code">
<pre>var swiperItem=function(length,item){
if(length%item==0){
return length / item;
}else{
return (length /item)+1;
}
} </pre>
module.exports = { 　　swiperItem:swiperItem //暴露该返回值 };
<pre> </pre>
</div>
这个方法我是用在一个工具类中，我觉得在开发小程序的过程中，也可以尽量的做到封装和继承。比如：写一个工具类，将所有属于数据转化这类的方法可以封装在这个js文件中，然后通过引用，直接调用这个方法，免去了在page页面js中代码过多，不便于后面维护。由于接手的是已完成的项目，所以用的是js语法，没有用ts语法，学过Java或其他面向对象编程思想的同学，可以尝试用ts语法来开发小程序，好处就不多说了。
在index.js文件中引用该方
<div class="cnblogs_code">
<pre>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中显示的条数
 })
　　}
})</pre>
</div>
这样就可以知道可以分多少个swiper-item展示了，（wx:for="{{barNum}}"）但是，在每个swi-item中要显示两条数据，那n条数据中，怎么一一对应插入到navigator中呢？ 
这里写一下总体思路吧：假如有10条数据，那肯定是分为5页显示了，那10条数据如何放入到navigator中呢？可以利用数组下标来表示：
newsList表示json数组，每条新闻标题可以表示为：newsList，newsList.....这样表示下去一直到newsList;
这个时候定义的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...的
具体代码入下；
<div class="cnblogs_code">
<pre><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> </pre>
</div>
 
当然，肯定会有更好的计算分页方法，推算不易，不喜勿喷。。。。 
来源：https://www.cnblogs.com/liao123/p/11012963.html

頁: [1]

琼殿技术论坛's Archiver

小程序开发日志-7、动态加载上下滚动数据列表（小程序开发）