微信小程序之tab切换

Posted 2020-11-04 小白都能看懂的指南

 

.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);
  }
})