码迷,mamicode.com
首页 > 微信 > 详细

微信小程序之tab切换

时间:2018-05-11 12:46:29      阅读:514      评论:0      收藏:0      [点我收藏+]

标签:pre   data   XML   var   get   ons   tap   turn   key   

 

.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切换

标签:pre   data   XML   var   get   ons   tap   turn   key   

原文地址:https://www.cnblogs.com/wdxue/p/9023444.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!