小程序-TabBar点击切换

这种页面的布局会经常用到，所以在此做个笔记，之后遇到可以节省很多时间

WXML：

<view class='listTitle_tab'>

     <view class='scrollTitle' style='{{Width}}px'>

              <view class='listTitle_tab_ltem {{index==0?"on":""}}' data-index="0" bindtap='btnchoose' style='{{WidthI}}px;'>标题一</view>

              <view class='listTitle_tab_ltem {{index==1?"on":""}}' data-index="1" bindtap='btnchoose' style='{{WidthI}}px; '>标题二</view>

              <view class='listTitle_tab_ltem {{index==2?"on":""}}' data-index="2" bindtap='btnchoose' style='{{WidthI}}px; '>标题三</view>

              <view class='listTitle_tab_ltem {{index==3?"on":""}}' data-index="3" bindtap='btnchoose' style='{{WidthI}}px;'>标题四</view>

              <view class='listTitle_tab_ltem {{index==4?"on":""}}' data-index="4" bindtap='btnchoose' style='{{WidthI}}px;'>标题五</view>

              <view class='listTitle_tab_ltem {{index==5?"on":""}}' data-index="5" bindtap='btnchoose' style='{{WidthI}}px;'>标题六</view>

              <view class='listTitle_tab_ltem {{index==6?"on":""}}' data-index="6" bindtap='btnchoose' style='{{WidthI}}px; '>标题七</view>

              <view class='listTitle_tab_ltem {{index==7?"on":""}}' data-index="7" bindtap='btnchoose' style='{{WidthI}}px;'>标题八</view>

     </view>

</view>

<swiper class='swiper_content' current="{{index}}" bindchange='swiperContent'>

     <swiper-item>我是内容一</swiper-item>

     <swiper-item>我是内容二</swiper-item>

     <swiper-item>我是内容三</swiper-item>

     <swiper-item>我是内容四</swiper-item>

     <swiper-item>我是内容五</swiper-item>

     <swiper-item>我是内容六</swiper-item>

     <swiper-item>我是内容七</swiper-item>

     <swiper-item>我是内容八</swiper-item>

</swiper>

 

CSS：

.listTitle_tab{height: 100rpx;line-height: 100rpx;border-bottom: 1px solid #ccc;background: #e5e5e5;overflow-x: scroll;}

::-webkit-scrollbar{display: none}

.scrollTitle{height: 100rpx;line-height: 100rpx;transition: .3s linear;}

.listTitle_tab_ltem{float: left;text-align: center;position: relative;}

.listTitle_tab_ltem:nth-of-type(2)::before{content: "";position: absolute;left: 0;top: 30rpx; 1px;height: 40rpx;background: #ccc}

.listTitle_tab_ltem:nth-of-type(2)::after{content: "";position: absolute;right: 0;top: 30rpx; 1px;height: 40rpx;background: #ccc}

.on{color: #ff0000;}

 

 

JS:

var indexNum;

var widthAll;

Page({

     data: {

        index: 0,

     },

onLoad: function (options) {

      var that = this;

      wx.getSystemInfo({

        success: function (res) {

           console.log(res)

           that.setData({

                WidthI: res.windowWidth / 3,

                Width: (res.windowWidth / 3) * 8

           })

          widthAll = res.windowWidth / 3

       },

    })

},

swiperContent: function (res) {

     var that = this;

     that.setData({

          index: res.detail.current

     })

},

btnchoose: function (e) {

      var that = this;

      indexNum = e.currentTarget.dataset.index;

      console.log(indexNum)

      var currentIndex = that.data.index //获取swiper显示的模块的index

      if (indexNum == currentIndex) {

           return false;

      } else {

           that.setData({

                 index: indexNum

           })

     };

 },

})