• 微信小程序分页显示


    <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; 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
          }
        })
      },
    })
    

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

    官方微信公众号

    吹逼交流群:711613774

    吹逼交流群

  • 相关阅读:
    文件操作3
    文件操作2
    kubernetes快速应用入门
    kubeadm初始化kubernetes集群
    kubernetes基础概念
    变量
    字面值
    关键字
    标识符
    Ubuntu安装MySql5.7
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11140218.html
Copyright © 2020-2023  润新知