微信小程序分页显示

╰+哭是因爲堅強的太久メ 2021-09-19 21:42 342阅读 1赞

<view class="tabNav">
        <view wx:for="{
       {navTab}}" wx:key="index" data-idx="{
       {index}}" bindtap="currentTab" class="{
       {currentTab==index ? 'cur' : ''}}"><text>{
       {item}}</text></view>
    </view>
    <view class="orderInfo">
      <view class="orderInfo-item" wx:for="{
       {sendList}}" wx:key="index"> 这是内容{
       {item.content}} </view> 
    </view>

.tabNav{z-index: 4; position: fixed; top:0;left:0; width:100%; height:80rpx; line-height: 80rpx; background: #fff; display: flex; padding:0 30rpx; border-bottom:1px solid #f5f5f5; box-sizing: border-box; }
    .tabNav> view{text-align: center; margin-right:50rpx;}
    .tabNav> view:last-child{ margin-right: 0;}
    .tabNav> view text{padding:0 15rpx; height:75rpx; display:inline-block;}
    .tabNav .cur text{ border-bottom:5rpx solid #36ccf9; color:#000;}

data: {
        entities: [],
        totalPages: 0,
        currentPage: 1,
        isLoading: true,
      },
    entities 是要表示的内容列表项目，totalPages 表示一共有多少页，currentPage 表示当前加入的页码是哪个。isLoading 表示加载的状态。

import cfg from '../../utils/config.js';
    import util from '../../utils/util.js';
    var app = getApp();
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        navTab: ['全部订单','待付款','待发货', '待收货'],        
        currentTab: 0,
        sendList:[],
      },
      select: {
        page: 1,
        size: 6,
        isEnd: false
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        this.getData()
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
        this.getData()
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      },
      currentTab: function (e) {
        if (this.data.currentTab == e.currentTarget.dataset.idx){
          return;
        }
        this.setData({
          currentTab: e.currentTarget.dataset.idx
        })
        this.select={
          page: 1,
          size: 6,
          isEnd: false
        }
        this.data.sendList=[];
        this.getData()
      },
      getData:function(){
        var _this=this;
        if (this.select.isEnd){
          return
        }
        var type = this.data.currentTab == 0 ? 'ALL' : this.data.currentTab == 1 ? 'WAIT_DELIVER' : 'DELIVER';
        util.request(`你的接口地址，后面的是参数` + type + `/` + this.select.page + `/` + this.select.size, {}, 'GET', function (res) {
          var content = res.data.data;
          _this.setData({
            sendList: (_this.data.sendList).concat(content) 
          })
          if (content.length>0){
            _this.select.page++
          }else{
            _this.select.isEnd=true
          }
        })
      },
    })

--------------------

## 请点赞！因为你的鼓励是我写作的最大动力！ ##

![官方微信公众号][1240]

吹逼交流群：**711613774**

![吹逼交流群][1240 1]

[1240]: /images/20210724/64ca52b68d5547479c0cdbc25ad31538.png
[1240 1]: /images/20210724/0eb505af792d4bc294f0bbb40333db81.png