WeChat mini program tabbar cut card

Recently, when I was researching mini programs, I encountered a problem, which is tabbar cutting. There is fragment on android, and there is also a third-party component provided on RN. WeChat mini program does not seem to have a dedicated component. It took me a long time to implement this function. Although many people have implemented this function, I found that either it did not meet my needs, or it was too cumbersome to implement. So I referred to blogs written by many experts and implemented one that met my needs. Code first.

Look at the js file first:

const util = require('../../utils/util.js');
Page({
    data: {
        navTab:["投资","理财"],
        /**
         * 页面配置
         */
        winWidth: 0,
        winHeight: 0,
        // tab切换
        currentTab: 0,
        arrayList:[1,2,3,4,5,6,6,7,6,3,2,1,8,9,6,0,4],
        modalHidden:true,
        content:"这是一个表情",
        imagesHeightList:[],
        imageList:[
            "../../images/image1.jpg",
            "../../images/image2.jpg",
            "../../images/image3.jpg",
        ],
        datalist:[
            "../../images/image1.jpg",
            "../../images/image2.jpg",
            "../../images/image3.jpg",
        ],
    },
    /** 
     * 页面初始化
     * options 为页面跳转所带来的参数
     */
    onLoad: function (options) {
        var that = this;
        /**
         * 获取系统信息
         */
        wx.getSystemInfo({
            success: function (res) {
                that.setData({
                    winWidth: res.windowWidth,
                    winHeight: res.windowHeight
                });
            }
        });
        
        
    },
    onReady: function () {
       
       
    },
/**
 * 显示弹窗
 */
    modalShow:function(){
        var that = this;
        that.setData({
            modalHidden:false,
        });
    },
/**
 * 点击取消，确认按钮
 */
modalChange:function(){
    var that = this;
        that.setData({
            modalHidden:true,
        });
},
    /**
     * 滑动切换tab
     */
    bindChange: function (e) {
        var that = this;
        that.setData({
             currentTab: e.detail.current 
             });
    },
    /**
     * 点击tab切换
     */
    swichNav: function (e) {
console.log("--------");
        var that = this;
        if (that.data.currentTab === e.target.dataset.idx) {
            return false;
        } else {
            that.setData({
                currentTab: e.target.dataset.idx
            })
        }
    },
})

css code

/**index.wxss**/  
.swiper-tab{  
    width: 100%;  
    border-bottom: 0.5rpx solid #cccccc;  
    text-align: center;  
    line-height: 80rpx;}  



.top-tab{
  width: 750rpx;
  height: 100rpx;
  background: #fff;
  color: #000;
  font-size: 28rpx;
  font-weight: bold;
  line-height: 100rpx;
  border-bottom: 4rpx solid #eee;
  margin: 0 20rpx 8rpx 0rpx;
  position: fixed;
  top: 0;
  z-index: 9999;
}

.shift{
  position:absolute;
  bottom: 1px;
  height: 3px;
  width: 20%;
  background: red;
}

.on{ 
    color: red;  
    border-bottom: 2rpx solid red ;
    }  
  
.swiper-box{ 
    display: block; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    }  
    
.swiper-box view{  
    text-align: center;  
}  


.swiper-tab{ 
    height: 30px; 
    line-height: 30px; 
    background: #FFF; 
    display: flex; 
    position: relative; 
    z-index: 2; 
    border-bottom: 1px solid #F4F4F4; 
    flex-direction:row; 
    justify-content:center; 
    align-items:center;
    }
    
.swiper-tab-list{ 
    margin: 0 20px;  
    padding: 0 4px; 
    font-size: 28rpx; 
    font-family: Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans CN", "PingFang SC", Roboto, "微软雅黑", "Heiti SC", "Microsoft Yahei", sans-serif }
.on{ border-bottom: 1px solid #48C23D; color: #48C23D; }

.swiper-box{
     display: block; 
     height: 100%; 
     width: 100%; 
     overflow: hidden; 
     }

.hot-box{ display: block; height: 100%; font-family: Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans CN", "PingFang SC", Roboto, "微软雅黑", "Heiti SC", "Microsoft Yahei", sans-serif }
.hot-box-main{ display: block; overflow: hidden; margin-bottom: 20px; background: #FFF; }

.hot-main{ height: 50px; background: url("../../static/001.jpg") #FFF no-repeat 0 50%; background-size: cover; padding: 30px 20px; position: relative; z-index: 1; }
.hot-main::before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; background-image: linear-gradient(180deg, rgba(0,0,0,0.05) 5%,rgba(0,0,0,0.85) 100%); }

.hot-main-box{ position: relative; z-index: 2; }
.hot-main-title{ color: #FFF; font-size: 34rpx;  }





.list-box{ padding: 20px 20px 20px 40px; display: block; font-size: 30rpx; border-bottom: 1px solid #F6F6F6; position: relative;}
.list-box::after{ display: block; content: ""; position: absolute; width: 6px; height: 6px; background: #ff6511; border-radius: 50%; top: 25px; left: 20px; }
.list-box-title{ font-weight: 400; line-height: 42rpx; }
.list-box-sub{ font-size: 24rpx; color: #666; padding-top: 6px; }

.hot-box-more{ text-align: center; font-size: 22rpx; color: #999; margin-bottom: 30px; }
.hot-box-more image{ width: 80px; height: 16px; display: block; margin: 0 auto;}



.swiper-boxs { height: 200px; 
background: #F2F2F2; 
}
.swiper-boxs-img { 
    display: block; 
    width: 100%; 
    height: 200px; 
    position: relative; 
    }
.swiper-boxs-img::before{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    content: '';
     background-image: linear-gradient(180deg, rgba(0,0,0,0.05) 5%,rgba(0,0,0,0.5) 100%);
     }

/*理财 */
.themes-box{ 
    display: block; 
    }
.themes-box-top{ 
    text-align: center;
    padding-bottom: 16px;
    padding-top: 16px; 
    background: #F9F9F9; }
.themes-box-title{ 
    font-size: 16px; 
    font-weight: 500; 
    display: block; }
.themes-box-subtitle{ 
    font-size: 12px; 
    color: #666; 
    display: block; 
    margin-top: 4px; 
    }

/* 投资列表 */
.themes-list{ 
    background: #FFF; 
    display: block; 
    margin-bottom: 20px; 
    }
.themes-list-box{ 
    display: block; 
    position: relative; 
    padding: 16px 20px; 
    border-bottom: 1px solid #F2F2F2;
     }
.themes-list-thumbnail{ 
    position: absolute; 
    left: 20px; 
    top: 16px; 
    height: 40px;
    width: 40px; 
     }
.themes-list-img{ 
    width: 40px;
     height: 40px;
      border-radius: 4px;
       border: 1px solid #F2F2F2;
       }
.themes-list-main{
     margin-left: 50px;
      }
.themes-list-name{
     font-size: 14px; 
     color: #444; 
     height: 20px; 
     line-height: 20px; 
     overflow: hidden; 
     }
.themes-list-description{ 
    font-size: 12px; 
    color: #999; 
    height: 20px; 
    line-height: 20px; 
    overflow: hidden;
     }






     /*理财系列*/

.WxMasonryView{
  column-count:2;
  column-gap: 2px;
  width: 100%;
}
.WxMasonry{
  width: 95%;
  background: #fefefe;
  border: 2px solid #fcfcfc;
  box-shadow: 0px 2px 2px rgba(34, 25, 25, 0.4);
  margin: 5px 2px 2px 2px;
  padding: 1px;
  padding-bottom: 5px;
  transition: opacity .4s ease-in-out;
  display: inline-block;
}
.WxMasonryImage{
  width: 100% !important;
  display: inline-block;
}



.swiper-box{ 
    display: block; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    }

.hot-box{ 
    display: block; 
    height: 100%;
     font-family: Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans CN", "PingFang SC", Roboto, "微软雅黑", "Heiti SC", "Microsoft Yahei", sans-serif
      }
.hot-box-main{ 
    display: block;
     overflow: hidden;
      margin-bottom: 20px;
       background: #FFF; 
       }


.hot-main::before{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; content: ''; background-image: linear-gradient(180deg, rgba(0,0,0,0.05) 5%,rgba(0,0,0,0.85) 100%); }


.hot-box-top{ padding: 20px; border-bottom: 1px solid #F6F6F6; text-align: center; }
.hot-box-title{ font-size: 32rpx; height: 30px; line-height: 32px; font-weight: 400; color: #444; padding: 5px 10px; border: 1px solid #444; }

.list-box{ 
  padding: 0; 
  display: inline-block; 
  font-size: 30rpx;
  border-bottom: 1px solid #F6F6F6; 
}
.list-box-title{ font-weight: 300; line-height: 42rpx; }

Look at the code above the html

<view class="swiper-tab">
    
<view class="swiper-tab-list flex-item {{currentTab==idx ? &#39;on&#39; : &#39;&#39;}}" wx:for="{{navTab}}" wx:for-index="idx" wx:for-item="itemName" data-idx="{{idx}}" bindtap="swichNav">
    {{itemName}}
  </view>
</view>

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
    
    <!-- 投资页面 -->
    <swiper-item>
        
        <scroll-view class="hot-box" scroll-y="true"                         upper-threshold="50" 
                    lower-threshold="100"   
                    bindscrolltolower="scrolltolower">


<view class="themes-list">

                <view class="themes-list-box" wx:for="{{arrayList}}">
                    <!--<navigator url="../themes/themes?id={{item.id}}">-->
                        <view class="themes-list-thumbnail">
                            <!--<image class="themes-list-img" src="{{item.thumbnail}}" />-->
                        </view>
                        <view class="themes-list-main" bindtap="modalShow">
                            <view class="themes-list-name">
                            <text>皇家林</text>
                            </view>
                            <view class="themes-list-description">
                            <text>是帅哥</text>
                            </view>
                        </view>
                    
                    <!--</navigator>-->
                    <modal title="标题" confirm-text="确认" cancel-text="取消" hidden="{{modalHidden}}" bindconfirm="modalChange" bindcancel="modalChange">
    确定要进入详情页面吗。
</modal>
                </view>

            </view>
        </scroll-view>
</swiper-item>




    <!-- 理财页面 -->
    <swiper-item>
        <scroll-view class="hot-box" scroll-y="true" upper-threshold="50" 
                    lower-threshold="100" bindscrolltolower="scrolltolower">
<text>理财页面</text>






<swiper class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">

    <swiper-item>
        <scroll-view class="hot-box" scroll-y="true" upper-threshold="50" 
                    lower-threshold="100" bindscrolltolower="scrolltolower">

            <view class="hot-box-main WxMasonryView" >
                <block wx:for="{{datalist}}" wx:for-item="item" wx:for-index="i" wx:key="">
                   
                    
                    <view class="WxMasonry" wx:for="{{imageList}}" wx:for-index="j" wx:for-item="items" wx:key="">
                        
                            <image class="WxMasonryImage" id="{{i*10+j}}" style="width:{{imagesHeightList[i*10+j].width}}px;height:{{imagesHeightList[i*10+j].height}}px"  bindload="WxMasonryImageLoad" src="../../images/imagebiaoqing.jpg"/>
                            <view class="list-box-title">
                           <text>{{content}}</text> 
                            </view>
                        
                    </view>
                </block>
            </view>
        </scroll-view>
    </swiper-item>
</swiper>
















            
            

          




        </scroll-view>
    </swiper-item>

</swiper>

Finally let’s take a look at the renderings

If you copy all the codes here, you will find that you can’t slide when you slide to the left. Don’t be surprised, that’s because I want to implement a waterfall flow on the financial management page. It is a semi-finished product and contains bugs. If you remove that part, it will be normal.

For more articles related to WeChat mini program tabbar checker, please pay attention to the PHP Chinese website!