为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
WebApp
<!-- 课程详情 选项卡 开始-->//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
     })
   }
 },



作者:释怀Believemin
链接:https://www.jianshu.com/p/a3507518aaa2


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消