微信小程序实现列表分页功能

更新时间：2022年08月24日 11:58:22 作者：四月迩安

这篇文章主要为大家详细介绍了微信小程序实现列表分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

微信小程序列表分页功能（未使用API），供大家参考，具体内容如下

概述

主要实现功能：

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

效果图：

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

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日）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

微信小程序-form表单提交代码实例
这篇文章主要介绍了微信小程序-form表单提交，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
查找页面中所有类为test的结点的方法
这篇文章主要介绍了查找页面中所有类为test结点的方法,需要的朋友可以参考下
2014-03-03
深入理解JavaScript定时机制
JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感
2010-10-10
JS分页控件可用于无刷新分页
今天无意看到了这个分页控件，不过使用方法不是很清楚没有研究，。大家可以自行研究，里面的函数写法倒是不错，需要内容的结合
2013-07-07
前端图片懒加载(lazyload)的实现方法(提高用户体验)
图片懒加载又称图片延时加载、惰性加载，即在用户需要使用图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度，相对的，也能减少服务器压力,下面通过本文给大家分享图片懒加载lazyload的实现方法，感兴趣的朋友一起看看吧
2017-08-08
微信小程序全局文件的使用详解
在小程序开发时，每个页面都对应一个目录，每个目录又分别有wxml、wxss、js和json四个文件。详细说明可查看后续文章介绍，本文主要详解全局文件
2022-08-08
微信小程序之左右布局的实现代码
这篇文章主要介绍了微信小程序之左右布局的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-12-12
拖动table标题实现改变td的大小(css+js代码)
拖动列宽的表格table标题同时改变td的大小，本文将以实例演示为大家呈现，感兴趣的朋友可以参考下哈，希望对你学习js或者css有所帮助
2013-04-04
JavaScript算法系列之快速排序（Quicksort）算法实例详解
这篇文章主要介绍了JavaScript算法系列之快速排序（Quicksort）算法实例详解的相关资料,需要的朋友可以参考下
2016-09-09
JS内部事件机制之单线程原理
这篇文章主要介绍了JS内部事件机制之单线程原理，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-07-07

微信小程序实现列表分页功能

概述

结语

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具