首页 > 微信 > 详细

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

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

标签:ont   图片   ffffff   cti   this   font   

效果图:

技术分享图片

 

 

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组件

标签:ont   图片   ffffff   cti   this   font   

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

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号