微信小程序之tabbar切卡

最近在研究小程序的时候，遇到了一个问题，就是tabbar切卡，在android上有fragment，在RN上也有提供一个第三方的组件来用，微信小程序，好像没有专门的一个组件来实现这个功能，度娘了大半天，虽然也有好多人实现过这样的功能，但是我发现要么是不符合我的需求，那么就是实现起来过于繁琐。于是我参考多个高手写的博客，实现出了一个符合自己需求的。先上代码。

先看js文件：

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代码

/**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; }

在看看html上面的代码

<view class="swiper-tab">
    
<view class="swiper-tab-list flex-item {{currentTab==idx ? 'on' : ''}}" 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>

最后我们看看效果图

这里如果全部代码复制，会发现往左边滑动的时候滑动不了，不要奇怪，那是因为在理财页面我想实现一个瀑布流，是一个半成品，存在bug，大家去掉那一部分就会正常了。

更多微信小程序之tabbar切卡 相关文章请关注PHP中文网！