微信小程序自定义菜单切换栏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 相关文章推荐
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
Jul 09 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
基于JavaScript实现滑动门效果
Mar 16 Javascript
vue实现在表格里,取每行的id的方法
Mar 09 Javascript
了解前端理论:rscss和rsjs
May 23 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
咖啡历史、消费和行业趋势
2021/03/03 咖啡文化
10条PHP高级技巧[修正版]
2011/08/02 PHP
Linux fgetcsv取得的数组元素为空字符串的解决方法
2011/11/25 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
php过滤敏感词的示例
2014/03/31 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
php 常用的系统函数
2017/02/07 PHP
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
Python验证文件是否可读写代码分享
2017/12/11 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
python3利用venv配置虚拟环境及过程中的小问题小结
2018/08/01 Python
python抖音表白程序源代码
2019/04/07 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
python代码编写计算器小程序
2020/03/30 Python
python字典的常用方法总结
2019/07/31 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
现场施工员岗位职责
2014/03/10 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
企业理念标语
2014/06/09 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
mybatis 获取无数据的字段不显示的问题
2021/07/15 Java/Android