美文网首页我爱编程
微信小程序的选项卡 并可以禁止手指的左右滑动

微信小程序的选项卡 并可以禁止手指的左右滑动

作者: 郭的妻 | 来源:发表于2018-10-31 16:09 被阅读0次
    <!-- 课程详情 选项卡 开始-->
    //html
    <view class="swiper-tab">
        <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">全部</view>
        <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">提现中</view>
        <view class="swiper-tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="clickTab">已提现</view>
        <view class="swiper-tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="clickTab">已提现</view>
    </view>
    <!-- 内容转换区 开始 -->
    <swiper class='swiper-box' current="{{currentTab}}" duration="300" bindchange="swiperTab">
        <swiper-item catchtouchmove="stopTouchMove"><view>全部</view></swiper-item>
        <swiper-item catchtouchmove="stopTouchMove"><view>提现中</view></swiper-item>
        <swiper-item catchtouchmove="stopTouchMove"><view>已提现</view></swiper-item>
        <swiper-item catchtouchmove="stopTouchMove"><view>已提现</view></swiper-item>
        
    </swiper> 
    <!-- 内容转换区 结束 -->
    
    //css
    .swiper-tab {
       width: 100%;
       text-align: center;
       line-height: 80rpx;
       background-color:white;
       position: fixed;
       top:420rpx;
       left:0rpx;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-wrap: nowrap;
     }
    .swiper-tab-item{
       width: 25%; 
       font-size: 32rpx;
       color:#434343;
      }
      .active{
         color:#027ee7;
         border-bottom: 3rpx solid #027EE7;
      }
     .swiper-box {
       width:100%;
       height:100%;
       position: fixed;
       top: 504rpx;
       left: 0rpx;
     }
    
    //js
      Page({
    
     /*页面的初始数据 */
     data: {
       currentTab: 0
     },
     //禁止选项卡的左右滑动 
     stopTouchMove: function () {
       return false;
     },
     // 选项卡转换
     clickTab: function (e) {
       var that = this;
       if (this.data.currentTab === e.target.dataset.current) {
         return false;
       } else {
         that.setData({
           currentTab: e.target.dataset.current
         })
       }
     },

    相关文章

      网友评论

        本文标题:微信小程序的选项卡 并可以禁止手指的左右滑动

        本文链接:https://www.haomeiwen.com/subject/hxvatqtx.html