微信小程序怎么实现列表分页功能(微信小程序,开发技术)

这篇“微信小程序怎么实现列表分页功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序怎么实现列表分页功能”文章吧。

概述

主要实现功能：

1.列表展示
2.上下页点击

效果图：

知识点：wx:for、bindtap、生命周期函数–监听页面加载、.filter、取余（ % ）取整（parseInt(x/y) ）函数

js

data:{frontPage:false,//上一页存在true，不存在falsenextPage:false,//下一页存在true，不存在falsepages:0,//所有页thisPages:0,//当前页rows:6,//每页条数total:0,//总条数pageData:[],//本页显示的列表数据prizeListItem:[{name:"张三",pic:"../../images/1.png",gift:"小蛋糕"},{name:"李四",pic:"../../images/2.png",gift:"冰淇淋"},{name:"陈工",pic:"../../images/3.png",gift:"按摩椅"},{name:"孙悟空",pic:"../../images/3.png",gift:"桃子"},{name:"猪八戒",pic:"../../images/2.png",gift:"红烧肉"},{name:"萨赫尚",pic:"../../images/1.png",gift:"新衣服"},{name:"程序员",pic:"../../images/2.png",gift:"电脑"},{name:"甄姬",pic:"../../images/3.png",gift:"口红"},{name:"孙悟空",pic:"../../images/3.png",gift:"桃子"},{name:"猪八戒",pic:"../../images/2.png",gift:"红烧肉"},{name:"萨赫尚",pic:"../../images/1.png",gift:"新衣服"},{name:"程序员",pic:"../../images/1.png",gift:"电脑"},{name:"甄姬",pic:"../../images/2.png",gift:"口红"}],myPrize:false,tab1:'',tab2:'selected',},

/***生命周期函数--监听页面加载*/onLoad:function(){this.setList();},//初始化列表分页setList(){letthat=this;letthisPages=that.data.thisPages;letrows=that.data.rows;letprizeListItem=that.data.prizeListItem;letpageData=that.data.pageData;letpages=that.data.pages;if(pageData!==[]){pageData=prizeListItem.filter(function(item,index,prizeListItem){//元素值，元素的索引，原数组。returnindex>=rows*thisPages&&index<=rows*(thisPages+1)-1;//初始为0，0<index<6-1});letx=0;lety=prizeListItem.length;if(y%rows!==0){x=1};pages=parseInt(y/rows)+x;//所有页thisPages=thisPages+1;//当前页if(pages>1){that.setData({nextPage:true,})}that.setData({thisPages:thisPages,pageData:pageData,pages:pages,rows:rows,})}},

//点击下一页clickNext(){letthat=this;letthisPages=that.data.thisPages;letprizeListItem=that.data.prizeListItem;letpageData=that.data.pageData;letpages=that.data.pages;letrows=that.data.rows;pageData=prizeListItem.filter(function(item,index,prizeListItem){//元素值，元素的索引，原数组。returnindex>=rows*thisPages&&index<=rows*(thisPages+1)-1;});thisPages=thisPages+1;if(pages===thisPages){that.setData({nextPage:false,})}that.setData({thisPages:thisPages,pageData:pageData,frontPage:true,})},

//点击上一页clickFront(){letthat=this;letthisPages=that.data.thisPages;letprizeListItem=that.data.prizeListItem;letpageData=that.data.pageData;letrows=that.data.rows;pageData=prizeListItem.filter(function(item,index,prizeListItem){//元素值，元素的索引，原数组。returnindex>=rows*(thisPages-2)&&index<=rows*(thisPages-1)-1;});thisPages=thisPages-1;if(thisPages===1){that.setData({frontPage:false,})}that.setData({thisPages:thisPages,pageData:pageData,nextPage:true,})},

wxml

<viewclass="prizelist"><viewclass="info_con"><viewclass="list"wx:for="{{pageData}}"><imageclass="list_bg"src="../../images/wi_listbg.png"></image><viewclass="list_head"><imageclass="list_headpic"src="{{item.pic}}"></image><viewclass="list_name">{{item.name}}</view></view><viewclass="list_prize">{{item.gift}}</view></view></view><viewclass="paging"><viewclass="page_btn"><viewwx:if="{{frontPage}}"bindtap="clickFront">上一页</view></view><viewclass="page_num">第{{thisPages}}页共{{pages}}页</view><viewclass="page_btn"><viewwx:if="{{nextPage}}"bindtap="clickNext">下一页</view></view></view></view>

wxss

【外框

.con.prizelist{width:100%;height:max-content;margin-top:38rpx;}.con.prizelist.info_con{width:639rpx;height:787rpx;display:inline-block;}

【list的样式

.con.prizelist.info_con.list{width:639rpx;height:108rpx;position:relative;margin:20rpx0;}.list.wi_prize{width:186rpx;height:69rpx;margin:20rpx0060rpx;}.list.prizeinfo{width:350rpx;height:108rpx;float:right;}.list.prizeinfo.prize_name{font-size:28rpx;color:#87562e;line-height:42rpx;margin-top:20rpx;}.list.prizeinfo.prize_state{font-size:20rpx;color:#ff2d2d;line-height:25rpx;}.list.list_bg{width:639rpx;height:108rpx;position:absolute;left:56rpx;z-index:-1;}.list.list_head{height:100%;width:max-content;margin-left:100rpx;float:left;}.list.list_head.list_headpic{border-radius:50%;background-color:rgb(43,93,216);width:46rpx;height:46rpx;margin:31rpx0rpx;float:left;}.list.list_head.list_name{color:#000;line-height:108rpx;font-size:28rpx;float:left;margin-left:31rpx;}.list.list_prize{height:100%;line-height:108rpx;font-size:28rpx;color:#87562e;float:right;}

【上下页样式

.con.prizelist.paging{width:580rpx;height:108rpx;margin:30rpxauto;}.con.prizelist.paging.page_btn{width:96rpx;height:32rpx;font-size:32rpx;font-family:"PingFangSC";color:#ffffff;line-height:36rpx;float:left;margin:auto23rpx;}.con.prizelist.page_num{font-size:24rpx;font-family:"PingFangSC";color:#ffffff;line-height:36rpx;float:left;margin:auto75rpx;}

结语

有一个可有可无的警告：

Now you can provide attr wx:key for a wx:for to improve performance.

解决办法：添加wx:key属性，

①使用循环的 array 中 item 的某个property，比如 wx:key=“item.id”
此时数组的格式应为：

{id:"1",name:"张三",pic:"../../images/1.png",gift:"小蛋糕"},

②使用数组的下标，即 wx:key=“index”

③ wx:key="*this" 我没太看懂，是

官方文档说的有一个经历过的低级错误：
错误：

onLoad:function(){setList();},

改正：

onLoad:function(){this.setList();},

后续

1.被指出 “第 X 页 共 X 页”的margin固定，当页数增加到双位数后，下一页被挤到下一行了。
方法1（同事脑力成果，担待了）：修改class为page_name的margin为百分比。
即

.con.prizelist.page_num{margin:auto75rpx;}

改为：

.con.prizelist.page_num{margin:auto10%;}

方法2（我自己的老办法）：给“上一页”“共 页”“下一个”分别定义class：

<viewclass="paging"><viewclass="up_page"bindtap="up_page">{{current_page>1?'上一页':''}}</view><viewclass="down_page"bindtap="next_page">{{current_page<last_page?'下一页':''}}</view><viewclass="page_num">第{{current_page}}页共{{last_page}}页</view></view>

样式：

.con.prizelist.paging{width:100%;height:108rpx;font-size:32rpx;font-family:"PingFangSC";color:#ffffff;line-height:36rpx;text-align:center;}.con.prizelist.paging.up_page{width:96rpx;height:32rpx;float:left;margin-left:72rpx;}.con.prizelist.paging.down_page{width:96rpx;height:32rpx;float:right;margin-right:72rpx;}.con.prizelist.page_num{width:500rpx;font-size:24rpx;font-family:"PingFangSC";color:#ffffff;line-height:36rpx;margin:auto;}

以上就是关于“微信小程序怎么实现列表分页功能”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。