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

微信小程序——自定义菜单切换栏tabbar组件

时间:2019-12-30 09:45:29      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:center   ext   Fix   js代码   风景   otto   size   pad   nbsp   

效果图:

技术图片

 

 

wxml代码:

<view class="top_tabbar" >  
  <block wx:for="{{itemName}}" wx:key="{{index}}">
     <view class="item_name {{tabIndex == index ? ‘active‘ : ‘‘}}" bindtap="handleItem" data-index="{{index}}">
        <text>{{item}}</text>
      </view>
  </block>
</view>

wxss代码:

.top_tabbar{
  width: 100%;
  background-color: #ffffff;
  display: flex;
  position: fixed;
}
.item_name{
  text-align: center;
  margin:20rpx 60rpx;
  color: grey;
}
.active{
  color: lightgreen;
}
.active text{
    padding-bottom: 10rpx;
    border-bottom: 4rpx solid lightgreen;
}

js代码:

data:{
    itemName: ["军事", "明星", "动漫","风景"],
    tabIndex: 0
  },
//获取点击事件
handleItem(e){
    // console.log(e)
    const index = e.currentTarget.dataset.index
    this.setData({
      tabIndex: index
    })
  }

微信小程序——自定义菜单切换栏tabbar组件

标签:center   ext   Fix   js代码   风景   otto   size   pad   nbsp   

原文地址:https://www.cnblogs.com/xubao/p/12117331.html

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