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


//html

    全部
    提现中
    已提现
    已提现



    全部
    提现中
    已提现
    已提现
    
 


//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
     })
   }
 },

你可能感兴趣的:(微信小程序的选项卡 并可以禁止手指的左右滑动)