小程序怎样实现列表分页展现及上下页点击

这篇文章主要讲解了“小程序怎样实现列表分页展示及上下页点击”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“小程序怎样实现列表分页展示及上下页点击”吧！

具体内容如下

主要实现功能：

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;

}

以上就是关于“小程序怎样实现列表分页展示及上下页点击”的相关知识，感谢各位的阅读。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!