- <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
- }
- })
- },
- })
请点赞! 因为你的鼓励是我写作的最大动力!
官方微信公众号
吹逼交流群: 711613774
吹逼交流群
来源: http://www.jianshu.com/p/b1c903cc4140