微信小程序tab选项卡

第一种:
wxml:
<!-- 导航栏开始 -->
<view class="swiper-tab">
  <view wx:for="{{tabs}}" wx:key class="swiper-tab-item {{curIdx==index?'swiper-active':''}}" data-current="{{index}}" catchtap="clickTab">
    <text>{{item}}</text> </view>
</view>

<!-- 内容开始 -->
<swiper class="swiper_content" current="{{curIdx}}" bindchange="swiperTab" style='height:{{scrollHeight}}px'>
  <swiper-item>
    <scroll-view class="scroll-y" scroll-y style='height:{{scrollHeight}}px' bindscrolltolower="onReachBottom">
      <view >
        <text> 内容一</text> </view>
    </scroll-view>
  </swiper-item>
  <swiper-item> 内容二 </swiper-item>
</swiper>


js:
data: {
    // params: {}
    tabs: ['爱心榜单', '总榜单'], // 导航菜单栏     
    curIdx: 0, // 当前导航索引     
    scrollHeight: 0, //滚动高度 = 设备可视区高度 -  导航栏高度     
  },


 //点击切换   
  clickTab: function(e) {
    let that = this;
    that.setData({
      curIdx: e.currentTarget.dataset.current
    })
  },
  //滑动切换   
  swiperTab: function(e) {
    this.setData({
      curIdx: e.detail.current
    });
  },

/**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
    let that = this;
    // 100为导航栏swiper-tab 的高度    
    that.setData({
      scrollHeight: wx.getSystemInfoSync().windowHeight - (wx.getSystemInfoSync().windowWidth / 750 * 100),
    })
 
  },

wxss:
/*初始化样式*/

view, text{
  display: flex;
  box-sizing: border-box;
}

/* 导航样式*/

.swiper-tab {
  position: relative;
  width: 100%;
  height: 100rpx;
  justify-content: center;
  align-items: center;
}

.swiper-tab-item {
  background-color: #f3f3f3;
  width: 50%;
  height: 80rpx;
  justify-content: center;
  align-items: center;
}

.swiper-active {
  background-color: rgb(129, 190, 247);
  color: #fff;
  position: relative;
}

.swiper-active::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -5%;
  width: 0;
  height: 0;
  border-right: 16rpx solid transparent;
  border-left: 16rpx solid transparent;
  border-bottom: 16rpx solid #fff;
}

/* 选项卡结束 */
















第二种:
wxml:



<view class="tab-left">

<view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="1" data-id="1" bindtap="tab">tab-hd01</view>

<view class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="2" data-id="2" bindtap="tab">tab-hd02</view>

<view class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="3" data-id="3" bindtap="tab">tab-hd03</view>

<view class="{{tabArr.curHdIndex=='4'? 'active' : ''}}" id="4" data-id="4" bindtap="tab">tab-hd04</view>

</view>

<view class="tab-right">

<view class="right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd01</view>

<view class="right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd02</view>

<view class="right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}">tab-bd03</view>

<view class="right-item {{tabArr.curBdIndex=='4'? 'active' : ''}}">tab-bd04</view>

</view>



wxss:



.tab-left .active{

color: #ff0000;

}

.tab-left{

display: flex;

}

.tab-left view{

width: 25%;

}

.tab-right .right-item{

display: none;

height: 300rpx;

width: 100%;

border: solid 1px

}

.tab-right .right-item.active{display: block}



js:



data: {

// tab 切换

tabArr: {

curHdIndex: 1,

curBdIndex: 1

},

}



//tab切换

tab: function (e) {

var dataId = e.currentTarget.id;

var obj = {};

obj.curHdIndex = dataId;

obj.curBdIndex = dataId;

this.setData({

tabArr: obj

})

},


微信小程序弹出自定义模态框，禁止底部页面滚动事件
本Markdown编辑器使用[StackEdit][6]修改而来，用它写博客，将会带来全新的体验哦：

添加自定义的模态框后，在上面的模态框上滑动，底部的页面也会跟着滑动！
其实这个问题很好解决啦!
只要在你的模态框上添加 catchtouchmove=’true’ 就可以了!

 

<view class='mainContent clear'>
  <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}} lt" id="1" data-id="1" bindtap="tab">
    <image src='../../image/28.png' wx:if="{{gu != '1'}}"></image>
    <image src='../../image/29.png' wx:else></image>
    <text>日志{{articleNum}}</text>
  </view>
  <view class="{{tabArr.curHdIndex=='2'? 'active' : ''}} lt" id="2" data-id="2" bindtap="tab">
    <image src='../../image/select.png' wx:if="{{ gu != '2'}}"></image>
    <image src='../../image/selected.png' wx:else></image>
    <text>收藏</text>
  </view>
</view>
 <!-- 日志 -->
 <view class='dd'>
  <view class="journalList {{tabArr.curBdIndex=='1'? 'active' : ''}}" >
      <view>123</view>
    </view>
    <!-- 收藏 -->
    <view class="journalList  {{tabArr.curBdIndex=='2'? 'active' : ''}}">
      324
    </view>
 </view>


.mainContent{
  width: 100%;
  height: 142rpx;
  padding-bottom: 20rpx;
  background: #fff;
  position: relative;
}
.mainContent view{
  width: 20%;
  text-align: center;
}
 .mainContent image{
  width: 48rpx;
  height: 48rpx;
  margin: 28rpx auto 15rpx;
}
.mainContent text{
  font-size:22rpx;
}

.mainContent .active{
  color: #7faf41;
}
.dd .journalList{
  display: none;
}
.dd .active{
  display: block;
}


  data: {
    // tab 切换
    tabArr: {
      curHdIndex: 1,
      curBdIndex: 1
    },
    gu: 1,
  },
  //tab切换
  tab: function (e) {
    var dataId = e.currentTarget.id;
    var obj = {};
    obj.curHdIndex = dataId;
    obj.curBdIndex = dataId;
    this.setData({
      tabArr: obj,
      gu: dataId
    });
  },