微信小程序之tab切换

Posted 小白都能看懂的指南

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序之tab切换相关的知识,希望对你有一定的参考价值。

 

.wxml

<view class="select_box">
  <scroll-view scroll-x="true" style="white-space:nowrap" class="nav_select">
    <text 
      class="select_item {{currentTab==index?‘red‘:‘‘}}" 
      wx:for="{{likes}}"
      wx:key 
      bindtap=‘selected_tap‘ 
      data-index=‘{{index}}‘
      data-current=‘{{index}}‘>
      {{item.title}}
    </text>
  </scroll-view>
  <view 
   class="selected_view {{currentTab==index?‘show‘:‘‘}}"
   current=‘{{currentTab}}‘
   wx:for="{{likes}}"
   wx:key  >
    {{item.text}}
  </view>
</view>

.wxss

.selected_view{
  display: none;
}
.red{
  color:red;
}
 .show{
  display: block;
} 

.js

Page({
  data:{
   likes:[
      {title:‘排行‘,text:‘22‘},
      { title: ‘推荐‘, text: ‘22‘ },
      { title: ‘游戏·‘, text: ‘12‘ },
      { title: ‘穿越‘, text: ‘2‘ },
      { title: ‘恋爱‘, text: ‘22‘ },
      { title: ‘耽美‘, text: ‘22‘ },
      { title: ‘玄幻‘, text: ‘22‘ },
      { title: ‘古风‘, text: ‘22‘ },
      { title: ‘都市‘, text: ‘22‘ },
      { title: ‘修真‘, text: ‘22‘ }
    ],
    currentTab:0
  },
  selected_tap:function(e){
       console.log(e)
       var that=this;
    if (that.data.currentTab === e.target.dataset.current){
       return false
    }else{
       that.setData({ currentTab: e.target.dataset.current})
    }
    console.log(e.target.dataset.index);
  }
})

 

以上是关于微信小程序之tab切换的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序基于swiper组件的tab切换

微信小程序实现滑动tab切换和点击tab切换并显示相应的数据(附源代码)

微信小程序实现tab切换(可滑动切换)

微信小程序入门篇全局配置 | 页面切换之tabBar配置项

#yyds干货盘点#愚公系列2022年02月 微信小程序-全局配置属性之tabBar

微信小程序--Tab栏切换的快速实现