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


Posted in Javascript onDecember 30, 2019

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

效果图:

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js计数器代码
Nov 04 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
jQuery 数据缓存模块进化史详细介绍
Nov 19 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
May 24 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
Mar 05 Javascript
Vue父子组建的简单通信之控制开关Switch的实现
Jun 04 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 #Javascript
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 #jQuery
Vue实现星级评价效果实例详解
Dec 30 #Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 #Javascript
微信小程序中网络请求缓存的解决方法
Dec 29 #Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 #Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 #Javascript
You might like
加强版phplib的DB类
2008/03/31 PHP
cmd下运行php脚本
2008/11/25 PHP
如何简单地用YUI做JavaScript动画
2007/03/10 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
asm.js使用示例代码
2013/11/28 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
JS从数组中随机取出几个数组元素的方法
2016/08/02 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
redis之django-redis的简单缓存使用
2018/06/07 Python
对python中的高效迭代器函数详解
2018/10/18 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
详解python编译器和解释器的区别
2019/06/24 Python
HTML5使用DOM进行自定义控制示例代码
2013/06/08 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
优秀教师演讲稿
2014/05/06 职场文书
员工安全生产承诺书
2014/05/22 职场文书
硕士学位申请报告
2015/05/15 职场文书
七一晚会主持词
2015/06/29 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android