微信小程序自定义菜单切换栏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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
jQuery层动画定位滑动效果的方法
Apr 30 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
AngularJS 入门教程之HTML DOM实例详解
Jul 28 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 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
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
thinkphp浏览历史功能实现方法
2014/10/29 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
Bootstrap导航条学习使用(二)
2017/02/08 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
宾馆总经理岗位职责
2014/02/14 职场文书
决心书标准格式
2014/03/11 职场文书
机关出纳岗位职责
2014/04/03 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
检讨书1000字
2014/10/11 职场文书
团组织推优材料
2014/12/29 职场文书
工作失职检讨书
2015/01/26 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript
MySQL索引失效场景及解决方案
2022/07/23 MySQL