javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > 小程序tab页面切换

小程序tab实现页面切换

作者:小雅雅家的小凯凯吖

这篇文章主要为大家详细介绍了小程序tab实现页面切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了小程序tab实现页面切换的具体代码,供大家参考,具体内容如下

.wxml

<view class='title'>
      <view class='titleSel' bindtap='titleClick' data-idx='0'>
        <text>待接收(0)</text>
        <hr class="{{0 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}}" />
      </view>
    
      <view class='titleSel' bindtap='titleClick' data-idx='1'>
        <text>处理中(1)</text>
        <hr class="{{1 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}} " />
      </view>
 
        <view class='titleSel' bindtap='titleClick' data-idx='2'>
        <text>已完成(1)</text>
        <hr class="{{2 == currentIndex ? 'headerLineSel' : 'headerLineUnsel'}} " />
      </view>
  </view>
 
  <!--内容布局-->
  <view class="colors">
      <view class="colors1" wx:if="{{currentIndex==0}}">
      {{currentIndex}}
      </view>
       <view class="colors2" wx:if="{{currentIndex==1}}">
             {{currentIndex}}
      </view>
       <view class="colors3" wx:if="{{currentIndex==2}}">
             {{currentIndex}}
      </view>
</view>

.wxss

page{
  width: 100%;
  height: 100%;
}
.container {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
 
.title {
  width: 100%;
  height: 88rpx;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
 
.titleSel {
  width: 33%;
  color: #5f6fee;
  font-size: 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.titleUnsel {
  color: #858fab;
  font-size: #858fab;
}
 
.headerLineSel {
  background: #5f6fee;
  height: 6rpx;
  width: 40rpx;
  position: relative;
  margin-top: 10rpx;
}
 
.headerLineUnsel {
  background: #fff;
  height: 6rpx;
  width: 40rpx;
  position: relative;
  margin-top: 10rpx;
}
 
 
.colors{
  width: 100%;
  height: 100%;
}
 
.colors1{
  width: 100%;
  height: 100%;
  background-color: royalblue;
}
.colors2{
  width: 100%;
  height: 100%;
  background-color: salmon;
}
.colors3{
  width: 100%;
  height: 100%;
  background-color: seagreen;
}

.js

data: {
    currentIndex: 0,
   
  },
 
  //用户点击tab时调用
  titleClick: function (e) {
    let currentPageIndex =
      this.setData({
        //拿到当前索引并动态改变
        currentIndex: e.currentTarget.dataset.idx
      })
 
      console.log(e.currentTarget.dataset.idx)
  },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文