前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序分页显示

微信小程序分页显示

作者头像
达达前端
发布2019-07-03 10:51:33
2.8K0
发布2019-07-03 10:51:33
举报
文章被收录于专栏:达达前端
代码语言:javascript
复制
<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>
代码语言:javascript
复制
.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;}
代码语言:javascript
复制
data: {
    entities: [],
    totalPages: 0,
    currentPage: 1,
    isLoading: true,
  },
entities 是要表示的内容列表项目,totalPages 表示一共有多少页,currentPage 表示当前加入的页码是哪个。isLoading 表示加载的状态。
代码语言:javascript
复制
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
      }
    })
  },
})
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.06.06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档