小程序-TabBar点击切换

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

WXML:

<view class='listTitle_tab'>
     <view class='scrollTitle' style='width:{{Width}}px'>
              <view class='listTitle_tab_ltem {{index==0?"on":""}}' data-index="0" bindtap='btnchoose' style='width:{{WidthI}}px;'>标题一</view>
              <view class='listTitle_tab_ltem {{index==1?"on":""}}' data-index="1" bindtap='btnchoose' style='width:{{WidthI}}px; '>标题二</view>
              <view class='listTitle_tab_ltem {{index==2?"on":""}}' data-index="2" bindtap='btnchoose' style='width:{{WidthI}}px; '>标题三</view>
              <view class='listTitle_tab_ltem {{index==3?"on":""}}' data-index="3" bindtap='btnchoose' style='width:{{WidthI}}px;'>标题四</view>
              <view class='listTitle_tab_ltem {{index==4?"on":""}}' data-index="4" bindtap='btnchoose' style='width:{{WidthI}}px;'>标题五</view>
              <view class='listTitle_tab_ltem {{index==5?"on":""}}' data-index="5" bindtap='btnchoose' style='width:{{WidthI}}px;'>标题六</view>
              <view class='listTitle_tab_ltem {{index==6?"on":""}}' data-index="6" bindtap='btnchoose' style='width:{{WidthI}}px; '>标题七</view>
              <view class='listTitle_tab_ltem {{index==7?"on":""}}' data-index="7" bindtap='btnchoose' style='width:{{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;width: 1px;height: 40rpx;background: #ccc}
.listTitle_tab_ltem:nth-of-type(2)::after{content: "";position: absolute;right: 0;top: 30rpx;width: 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
           })
     };
 },
})
posted @ 2018-03-14 11:23  MiniDuck  阅读(763)  评论(0编辑  收藏  举报