微信小程序实现列表分页功能
更新时间：2022年08月24日 11:58:22 作者：四月迩安
这篇文章主要为大家详细介绍了微信小程序实现列表分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序列表分页功能（未使用API），供大家参考，具体内容如下
概述
主要实现功能：
1.列表展示
2.上下页点击
效果图：
知识点：wx:for、bindtap、生命周期函数–监听页面加载、.filter、取余（ % ）取整（parseInt(x/y) ）函数
js
data: {
frontPage: false,//上一页 存在true，不存在false
nextPage: false,//下一页 存在true，不存在false
pages: 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() {
let that = this;
let thisPages = that.data.thisPages;
let rows = that.data.rows;
let prizeListItem = that.data.prizeListItem;
let pageData = that.data.pageData;
let pages = that.data.pages;
if (pageData !== []){
pageData = prizeListItem.filter(function (item, index, prizeListItem) {
//元素值，元素的索引，原数组。
return index >= rows*thisPages && index <= rows*(thisPages+1)-1; //初始为0，0 < index < 6-1
});
let x = 0;
let y = 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() {
let that = this;
let thisPages = that.data.thisPages;
let prizeListItem = that.data.prizeListItem;
let pageData = that.data.pageData;
let pages = that.data.pages;
let rows = that.data.rows;
pageData = prizeListItem.filter(function (item, index, prizeListItem) {
//元素值，元素的索引，原数组。
return index >= 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() {
let that = this;
let thisPages = that.data.thisPages;
let prizeListItem = that.data.prizeListItem;
let pageData = that.data.pageData;
let rows = that.data.rows;
pageData = prizeListItem.filter(function (item, index, prizeListItem) {
//元素值，元素的索引，原数组。
return index >= 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
<view class="prizelist">
<view class="info_con">
<view class="list" wx:for="{{pageData}}">
<image class="list_bg" src="../../images/wi_listbg.png"></image>
<view class="list_head">
<image class="list_headpic" src="{{item.pic}}"></image>
<view class="list_name">{{item.name}}</view>
</view>
<view class="list_prize">{{item.gift}}</view>
</view>
</view>
<view class="paging">
<view class="page_btn">
<view wx:if="{{frontPage}}" bindtap="clickFront">上一页</view>
</view>
<view class="page_num">第{{thisPages}}页 共{{pages}}页</view>
<view class="page_btn">
<view wx: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: 20rpx 0;
}
.list .wi_prize{
width: 186rpx;
height: 69rpx;
margin: 20rpx 0 0 60rpx;
}
.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: 31rpx 0rpx;
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: 30rpx auto;
}
.con .prizelist .paging .page_btn{
width: 96rpx;
height: 32rpx;
font-size: 32rpx;
font-family: "PingFangSC";
color: #ffffff;
line-height: 36rpx;
float: left;
margin: auto 23rpx;
}
.con .prizelist .page_num{
font-size: 24rpx;
font-family: "PingFangSC";
color: #ffffff;
line-height: 36rpx;
float: left;
margin: auto 75rpx;
}结语
有一个可有可无的警告：
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();
},（我都没眼看了，马虎或则脑子不清楚的错误总是次次能碰到——2021年3月9日）
后续
1.被指出 “第 X 页 共 X 页”的margin固定，当页数增加到双位数后，下一页被挤到下一行了。
方法1（同事脑力成果，担待了）：修改class为page_name的margin为百分比。
即
.con .prizelist .page_num{
margin: auto 75rpx;
}改为：
.con .prizelist .page_num{
margin: auto 10%;
}方法2（我自己的老办法）：给“上一页”“共 页”“下一个”分别定义class：
<view class="paging">
<view class="up_page" bindtap="up_page" >{{current_page > 1 ? '上一页' : ''}}</view>
<view class="down_page" bindtap="next_page">{{current_page < last_page ? '下一页' : ''}}</view>
<view class="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;
}（时间：2021年3月22日）
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JS电话号码验证是比较常的一种验证，下边给出一个JavaScript验证电话号码的小例子。国内固定电话都是七位或8位的数字组成的，还可以带有长途的区号。2015-09-09
通过在网站上的资料搜集，得到了很多关于string类用法的文档，通过对这些资料的整理和加入一些自己的代码，就得出了一份比较完整的关于string类函数有哪些和怎样用的文档了！2015-08-08
这篇文章主要介绍了var，let，const异同点,文中较详细的给大家介绍了let和const的相同点和不同点，需要的朋友可以参考下2018-08-08
js open() 与showModalDialog()方法使用介绍
项目开发中经常要用到js open() 与showModalDialog()方法，下面有个不错的示例，喜欢的朋友可以研究下2013-09-09
如你所知,javascript里执行环境是作为一个最核心的概念存在的。相信广大FE筒子们对于这个概念不会陌生，它定义了变量或函数有权访问其他数据范围以及其行为。2011-08-08
这篇文章主要为大家详细介绍了js实现无缝轮播图插件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-07-07
本文给大家分享两种方法实现JS限制input框只能输入0~100的正整数,方法二是直接通过设置三个属性,type、min、max即可,就可以设置0~100的整数,感兴趣的朋友跟随小编一起看看吧2024-02-02
webpack4 配置 ssr 环境遇到“document is not defined”
这篇文章主要介绍了webpack4 配置 ssr 环境遇到“document is not defined”，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要为大家详细介绍了微信小程序彩票号码生成器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家详细介绍了基于JavaScript实现留言板功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
最新评论