• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序之tab切换

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序学习01发布时间:2022-07-18
下一篇:
关于小程序去除view/navigator点击后默认阴影效果发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap