微信小程序自定义菜单切换栏tabbar组件代码实例

微信(小程序)  /  管理员 发布于 5年前   485

这篇文章主要介绍了微信小程序自定义菜单切换栏tabbar组件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

效果图：

wxml代码：

         {{item}}    

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 custom-tab-bar 6s出不来解决方案(cover-view不兼容)
• 微信小程序自定义tabBar在uni-app的适配详解
• 微信小程序官方动态自定义底部tabBar的例子
• 微信小程序tabBar 返回tabBar不刷新页面
• 如何自定义微信小程序tabbar上边框的颜色
• vue组件tabbar使用方法详解
• 微信小程序自定义tabBar组件开发详解
• 微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb