微信小程序Tab页

我们能够经常看到小程序的页面是这样的布局格式。

tab

但是在实现过程中有一点麻烦，所以就写出来供参考。

页面wxml代码

下面的这段代码是只是实现了前三个页面的内容，包括了一些滚动条的内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!-- 标签页 -->
<view class="swiper-tab">  
    <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">未支付</view>  
    <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">已支付</view>  
    <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">已取消</view>  
    <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">已完成</view>  
    <view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">待评价</view>  
    <view class="swiper-tab-list {{currentTab==5 ? 'on' : ''}}" data-current="5" bindtap="swichNav">已评价</view>  
  </view>
 
<view  class="tab-content">
    <!-- 收入 -->
    <scroll-view scroll-y="true" bindscrolltolower="loadIncome" class="tab-list-content {{currentTab==0?'active':''}}">
        <view class="tab-list-item" wx:for="{{inList}}">
            <view class="tab-list-item-detail">
                <text>{{item.style}}</text>
                <text class="tab-list-item-after">{{item.coin}}</text>
            </view>
            <view class="tab-list-item-time">{{item.time}}</view>
        </view>
        <view hidden="{{isHidenLoadMore}}">
            <loading type="circle">加载中</loading>
        </view>
    </scroll-view>
    <!-- 支出 -->
    <scroll-view scroll-y="true" bindscrolltolower="loadOutlay" class="tab-list-content {{currentTab==1?'active':''}}">
        <view class="tab-list-item" wx:for="{{outList}}">
            <view class="tab-list-item-detail">
                <text>{{item.style}}</text>
                <text class="tab-list-item-after">{{item.coin}}</text>
            </view>
            <view class="tab-list-item-time">{{item.time}}</view>
        </view>
        <view hidden="{{isHidenLoadMore}}">
            <loading type="circle">加载中</loading>
        </view>
    </scroll-view>
    <!-- 已取消 -->
    <view class="tab-list-content {{currentTab==2?'active':''}}">
        <text>111</text>
    </view>
</view>

wxss代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.swiper-tab{  
  width: 100%;  
  border-bottom: 1px solid #dadada;
  text-align: center;  
  height: 100vh;
  line-height: 70rpx;
  background-color: #fad73f;
}  
.swiper-tab-list{  
  font-size: 30rpx;  
  display: inline-block;  
  width: 16%;  
} 
.on{
  border-bottom: 2px solid rgb(58, 186, 248);
  color: rgb(58, 186, 248);
}
.tab-content{
  background-color: rgb(234, 234, 239);
  margin: 0 24rpx;
  /* margin-top:368rpx; */
  position: fixed;
  top: 85rpx;
  left: 0;
  right: 0;
  bottom: 0;
}
.tab-list-content{
  display: none;
  height: 100%;
}
.tab-list-content.active{
  display: block;
}
.tab-list-item{
  padding: 16rpx 24rpx;
  border-bottom: 1px solid rgb(229, 246, 253);
}
.tab-list-item-detail{
  display: flex;
  justify-content: space-between;
}
.tab-list-item-after{
  font-weight: bold;
}
.tab-list-item-time{
  color: rgb(136, 136, 136);
  font-size: 12px;
}

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
// pages/me-customer/me-customer.js
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
      isHidenLoadMore:true,
      currentTab:0,

      inList: [{ style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }, { style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }, { style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }, { style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }, { style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }, { style: '签到', coin: '+100', time: '01:49:46' }, { style: '分享美文', coin: '+500', time: '05:49:46' }],

      outList: [{ style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }, { style: '兑换礼品', coin: '-1000', time: '01:49:46' }, { style: '兑换礼品', coin: '-50000', time: '05:49:46' }]
  },
  /** 
    * 滑动切换tab  
    */
   bindChange: function (e) {

    var that = this;
    that.setData({ currentTab: e.detail.current });

  },
  onPullDownRefresh: function () {
    wx.showNavigationBarLoading()
    setTimeout(function () {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
    }, 1500);
  },
  /** 
   * 点击tab切换 
   */
  swichNav: function (e) {

    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },

  loadIncome:function(e){
      console.log("收入");
      console.log(e);

      var that = this;
      var maxNum = 1000; //最多可加载条目

      var newList = [{ style: '签到', coin: '+50', time: '01:49:46' }, { style: '分享美文', coin: '+300', time: '05:49:46' },{ style: '签到', coin: '+50', time: '01:49:46' },{ style: '签到', coin: '+50', time: '01:49:46' },{ style: '签到', coin: '+50', time: '01:49:46' },{ style: '签到', coin: '+50', time: '01:49:46' },{ style: '签到', coin: '+50', time: '01:49:46' },{ style: '签到', coin: '+50', time: '01:49:46' }];

      var inList = that.data.inList;
      if (inList.length < maxNum) {
          that.setData({
              isHidenLoadMore: false//显示“加载符”
          });
          for (let val of newList) {
              inList.push(val);
          };

          setTimeout(function () {//模拟请求延迟个过程，实际可以不用要setTimeout
              that.setData({
                  isHidenLoadMore: true,
                  inList: inList
              })
          }, 2000);
      }
  },

  loadOutlay: function (e) {
      console.log("支出");
      console.log(e);

      var that = this;
      var maxNum = 50; //最多可加载条目

      var newList = [{ style: '签到', coin: '-150', time: '01:49:46' }, { style: '分享美文', coin: '-600', time: '05:49:46' }];

      var outList = that.data.outList;
      if (outList.length < maxNum) {
          that.setData({
              isHidenLoadMore: false//显示“加载符”
          });
          for (let val of newList) {
              outList.push(val);
          };

          setTimeout(function () {//模拟请求延迟个过程，实际可以不用要setTimeout
              that.setData({
                  isHidenLoadMore: true,
                  outList: outList
              })
          }, 2000);
      }
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
      var that = this;
      var maxNum = 30; //最多可加载条目

      var newList = [{ style: '签到', coin: '+50', time: '01:49:46' }, { style: '分享美文', coin: '+300', time: '05:49:46' }];

      var inList = that.data.inList;
      if (inList.length < maxNum) {
          that.setData({
              isHidenLoadMore: false//显示“加载符”
          });
          for (let val of newList) {
              inList.push(val);
          };

          setTimeout(function () {//模拟请求延迟个过程，实际可以不用要setTimeout
              that.setData({
                  isHidenLoadMore: true,
                  inList: inList
              })
          }, 2000);
      }
  },
})

说明

这个代码可以直接作为模板使用，同时有了下拉刷新的功能。