小程序Tab选项卡

朴灿烈づ我的快乐病毒、 2023-05-22 10:22 46阅读 0赞

*  Tab选项卡
 *  下拉刷新、上拉加载更多
 *  数据空白页面显示
 *  滑动时，当页面无数据时才会触发刷新

网上小程序Tab选项卡的文章有很多，可都无法实现加载更多，因为swpier会使其失效。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdWp1bmthbmczNjM_size_16_color_FFFFFF_t_70][]

删代码好累，自行看关键代码吧。

wxml代码

<view class="page">
    
      
      <view class='title'>
        <view bindtap='titleClick' data-idx='0' class="{
       {0 == currentIndex ? 'titleSel' : 'titleUnsel'}}">
          <text class="t2">已处理</text>
          <hr class="{
       {0 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}}" />
        </view>
    
        <view class="{
       {1 == currentIndex ? 'titleSel' : 'titleUnsel'}}" bindtap='titleClick' data-idx='1'>
          <text class="t2">已取消</text>
          <hr class="{
       {1 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}} " />
        </view>
      </view>
    
      
      <swiper class='swiper' bindchange='pagechange' current='{
       {currentIndex}}'>
        <swiper-item class='swiper'>
    <scroll-view scroll-y="true" style="height: 100%;"  bindscrolltolower="lower"  refresher-enabled  bindrefresherrefresh="pullRefresh"  refresher-triggered="{
       {trigger}}"  >
          <view class='item' wx:key="id" wx:for="{
       {list1}}" data-item='{
       {item}}'>
            
            <view class='item-title'>
               <view class="shuiping">
                <image src="../../imgs/handicon.png" class="ic"></image>
                <text class="t12">提交人：{
       {item.createdBy}}</text>
              </view>
              <view class="shuiping">
               <button data-item="{
       {item}}" wx:if="{
       {tools.isAfterToday(item.items.visit_date.value)}}" class="val-btn" catchtap="modify">修改</button>
              <button  class="val-btn" bindtap="shareTap" data-item="{
       {item}}">分享</button>
              </view>
            </view>
    
            
            <view class='s-line'></view>
    
            
            <view class='tag-item'>
              <view class='tag'></view>
              <text class="basemsg">基础信息</text>
            </view>
    
            <view class='txtDetail'>
               
                <view class="con">
                <text class="left">用餐人数：</text>
                <text class="right">{
       {item.items.people_amount_of_dinner.value}}人</text>
              </view>
            </view>
    
            <view class='tag-item'>
              <view class='tag'></view>
              <text class="basemsg">接待准备</text>
            </view>
    
            <view class='txtDetail'>
              
            <view wx:if="{
       {item.items.souvenir_type.value}}" class="con">
                <text class="left">拍摄：</text>
                <text class="right">{
       {tools.cgps(item.items.souvenir_type.value)}}</text>
              </view>
              <text wx:if="{
       {item.items.remarks.value}}">{
       {item.items.remarks.value}}</text>
            </view>
          </view>
          <custom-empty class="emptyCss" wx:if= '{
       {count1 == 0}}'></custom-empty>
           </scroll-view>
        </swiper-item>
    <swiper-item class='swiper'>
    <scroll-view scroll-y="true" style="height: 100%;"  bindscrolltolower="lower"  refresher-enabled  bindrefresherrefresh="pullRefresh"  refresher-triggered="{
       {trigger}}"  >
          <view class='item' wx:key="id" wx:for="{
       {list2}}" data-item='{
       {item}}'>
            
            <view class='item-title'>
            <view class="shuiping">
                <image src="../../imgs/handicon.png" class="ic"></image>
                <text class="t12">提交人：{
       {item.createdBy}}</text>
              </view>
            </view>
    
            
            <view class='s-line'></view>
    
            
            <view class='tag-item'>
              <view class='tag'></view>
              <text class="basemsg">基础信息</text>
            </view>
    
            <view class='txtDetail'>
               
                <view class="con">
                <text class="left">用餐人数：</text>
                <text class="right">{
       {item.items.people_amount_of_dinner.value}}人</text>
              </view>
            </view>
    
            <view class='tag-item'>
              <view class='tag'></view>
              <text class="basemsg">接待准备</text>
            </view>
    
            <view class='txtDetail'>
            <view wx:if="{
       {item.items.souvenir_type.value}}" class="con">
                <text class="left">拍摄：</text>
                <text class="right">{
       {tools.cgps(item.items.souvenir_type.value)}}</text>
              </view>
              <text wx:if="{
       {item.items.remarks.value}}">{
       {item.items.remarks.value}}</text>
            </view>
          </view>
    <custom-empty class="emptyCss" wx:if= '{
       {count2 == 0}}'></custom-empty>
    </scroll-view>
        </swiper-item>
      </swiper>
    </view>

wxss代码：

/* pages/mytasks/tasks.wxss */
    .page{
        display: flex;
        flex-direction: column;
         height: 100vh;
         min-height: 100%;
         box-sizing: border-box;
         
    }
    
    .ic{
      width: 35rpx;
      height: 35rpx;
    }
    
    .val-btn {
        color: #11a7fe;
        border-width: 1rpx;
        border-style: solid;
        border-color: #11a7fe;
        font-size: 30rpx;
        margin-right: 30rpx;
        background-color: white;
        padding-left: 15rpx;
        padding-right: 15rpx;
        padding-top: 10rpx;
        padding-bottom: 10rpx;
        line-height: normal;
        min-width: 90rpx;
    }
    
    .btnhover {
        color: #84bffa;
        border-color: #90c4f7;
    }
    
    .val-btn::after {
        border: none;
    }
    
    .title {
      width: 100%;
      height: 100rpx;
      background: #ececec;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    
    .titleSel {
      width: 50%;
      color: #13a3f2;
      font-size: 32rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 45rpx;
    }
    
    .titleUnsel {
      width: 50%;
      color: #b1b1b1;
      font-size: 32rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 45rpx;
    }
    
    .headerLineSel {
      background: #13a3f2;
      height: 5rpx;
      width: 90rpx;
      position: relative;
      border-radius: 2px;
      border-width: 1rpx;
      border-style: solid;
      margin-top: 30rpx;
    }
    
    .t2{
      margin-top: 30rpx;
    }
    
    .headerLineUnsel {
      background: #ececec;
      height: 6rpx;
      width: 100rpx;
      position: relative;
      margin-top: 30rpx;
    }
    
    .h15 {
      height: 15px;
      width: 100%;
      background: #f7f7f7;
    }
    
    .swiper {
      width: 100%;
      flex: 1;
      height: calc(100vh-123rpx);
      overflow: scroll;
      background: #f6f6f6;
    }
    .t1{
      font-size: 36rpx;
      font-weight: bold;
    }
    .t12{
      font-size: 32rpx;
      margin-left: 20rpx;
    }
    .shuzhi{
      display: flex;
      flex-direction: column;
    }
    .shuiping{
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    
    .item{
      margin: 40rpx;
      padding: 25rpx 0rpx 25rpx 25rpx;
      background: white;
    }
    
    .item-title{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
    
    .s-line{
      width: 100%;
      height: 1px;
      background-color: #dddddd;
      margin-top: 26rpx;
    }
    
    .basemsg{
      margin-left: 20rpx;
      color:#666666;
      font-size: 32rpx;
    }
    
    .tag-item{
      margin-top: 20rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 33rpx;
    }
    
    .tag{
      height: 15rpx;
      width: 15rpx;
      border-radius: 50%;
      background-color: #12a2fe;
      
    }
    
    .txtDetail{
      display: flex;
      flex-direction: column;
      margin-top: 10rpx;
      font-size: 32rpx;
    }
    
    .emptyCss {
      display: flex;
      margin-top: 100px;
      justify-content: center;
    }
    
    text{
      word-break: break-all;
    }
    
    .left{
      width: 25%;
    }
    .right{
      width: 75%;
    }
    .con{
      display: flex;
    }

json代码：

{
      "usingComponents": {
        "custom-empty": "/components/custom-empty/custom-empty"
      },
      "navigationBarTitleText": "我的处理"
    }

js代码：

// pages/mytasks/tasks.js
    const tyhttp = require('../../utils/tyHttp.js');
    Page({
    
        /**
         * 页面的初始数据
         */
        data: {
            fours: [1, 2], //为了生成2个swiper
            currentIndex: 0,
          number1: 0,
          number2: 0,
          size: 10,
          count1: -1,
          count2: -1,
          list1: [],
          list2: [],
          isXingZheng: false,
          trigger: true,
          isPreview:false
        },
    
        /**
         * 生命周期函数--监听页面加载
         */
        onLoad: function (options) {
          
        },
    
      queryData() {
        let number = 0;
        let status="2";
        if (this.data.currentIndex == 0) {
          status="2";
          number = this.data.number1;
        } else if (this.data.currentIndex == 1) {
          status="3";
          number = this.data.number2;
        }
        var path = "/api/receives";
        var params = {
          number: number,
          size: this.data.size,
          status: status
        };
        tyhttp.post({
          path: path,
          params: params,
          success: res => {
            if (this.data.currentIndex == 0) {
              this.setData({
                number1: res.number,
                count1: res.totalElements
              });
              if (this.data.number1 == 0) {
                this.setData({
                  list1: []
                });
              }
              if(res.content&&res.content.length>0){
                this.setData({
                  list1: this.data.list1.concat(res.content),
                  number1: ++this.data.number1
                });
              }
            } else if (this.data.currentIndex == 1) {
              this.setData({
                number2: res.number,
                count2: res.totalElements
              });
              if (this.data.number2 == 0) {
                this.setData({
                  list2: []
                });
              }
              if(res.content&&res.content.length>0){
                this.setData({
                  list2: this.data.list2.concat(res.content),
                  number2: ++this.data.number2
                });
              }
            }
            wx.stopPullDownRefresh();
            this.setData({
              trigger: false
            });
          },
          fail: err => {
            wx.showToast({
              title: err,
              icon: "none"
            })
            wx.stopPullDownRefresh();
            this.setData({
              trigger: false
            });
          },
          isLoading: true,
        });
      },
    
        /**
         * 生命周期函数--监听页面初次渲染完成
         */
        onReady: function () {
    
        },
    
        /**
         * 生命周期函数--监听页面显示
         */
        onShow: function () {
         
          let roleCode = wx.getStorageSync('roleCode');
          if (roleCode.indexOf(getApp().globalData.xingZheng) != -1) {
            this.setData({
              isXingZheng: true
            });
          }
          this.onPullDownRefresh();
        },
    
      lower(e) {
        console.log(e)
        this.onReachBottom();
      },
    
      /**
       * 自定义scroll下拉刷新
       */
      pullRefresh() {
        this.onPullDownRefresh();
      },
    
      pulling() {
        console.log('pulling');
      },
      abort() {
        console.log('abort');
      },
      restore() {
        console.log('restore');
      },
    
        /**
         * 生命周期函数--监听页面隐藏
         */
        onHide: function () {
    
        },
    
        /**
         * 生命周期函数--监听页面卸载
         */
        onUnload: function () {
    
        },
    
        /**
         * 页面相关事件处理函数--监听用户下拉动作
         */
        onPullDownRefresh: function () {
          if (this.data.currentIndex == 0) {
            this.setData({
              number1: 0
            })
          } else if (this.data.currentIndex == 1) {
            this.setData({
              number2: 0
            })
          }
          this.queryData();
        },
    
        /**
         * 页面上拉触底事件的处理函数
         */
        onReachBottom: function () {
          if (this.data.currentIndex == 0) {
            if (this.data.count1 > this.data.list1.length) {
              this.queryData();
            }
          } else if (this.data.currentIndex == 1) {
            if (this.data.count2 > this.data.list2.length) {
              this.queryData();
            }
          } 
        },
    
        /**
         * 用户点击右上角分享
         */
        onShareAppMessage: function (options) {
           
        },
    
        //用户点击tab时调用
        titleClick: function (e) {
          this.setData({
            //拿到当前索引并动态改变
            currentIndex: e.currentTarget.dataset.idx
          })
          if (this.data.currentIndex == 0) {
            if (this.data.number1 == 0 && (this.data.list1 == null || this.data.list1.length == 0)) {
              this.queryData();
            }
          } else if (this.data.currentIndex == 1) {
            if (this.data.number2 == 0 && (this.data.list2 == null || this.data.list2.length == 0)) {
              this.queryData();
            }
          }
        },
    
        //swiper切换时会调用
        pagechange: function (e) {
          this.setData({
            currentIndex: e.detail.current,
          });
          if (this.data.currentIndex == 0) {
            if (this.data.number1 == 0 && (this.data.list1 == null || this.data.list1.length == 0)) {
              this.queryData();
            }
          } else if (this.data.currentIndex == 1) {
            if (this.data.number2 == 0 && (this.data.list2 == null || this.data.list2.length == 0)) {
              this.queryData();
            }
          } 
        },
    
    
      modify: function (e) {
        let item = e.currentTarget.dataset.item;
        this.doHandle(item);
      },
    
      doHandle(item) {
        var url = ''
        if (this.data.isXingZheng) {
          url = '../mid-handling/mid-handling?item=' + JSON.stringify(item);
        } else {
          url = '../handling/handling?item=' + JSON.stringify(item);
        }
        wx.navigateTo({
          url: url
        })
      }
    })

空页面目录

![20200417123452912.png][]

代码就不用写了吧，wxml放张图片就ok了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvdWp1bmthbmczNjM_size_16_color_FFFFFF_t_70]: /images/20230521/e12c1eeb75a440f0ab49fd2bb229f8d4.png
[20200417123452912.png]: /images/20230521/f67c5fa9a1284cb4932bae9e8784746a.png