微信小程序实战之顶部导航栏(选项卡)(1)


Posted in Javascript onJune 19, 2020

本文实例为大家分享了微信小程序顶部导航栏的具体代码,供大家参考,具体内容如下

需求:顶部导航栏

效果图:

微信小程序实战之顶部导航栏(选项卡)(1)

wxml:

<!--导航条--> 
<view class="navbar"> 
 <text wx:for="{{navbar}}" data-idx="{{index}}" class="item {{currentTab==index ? 'active' : ''}}" wx:key="unique" bindtap="navbarTap">{{item}}</text> 
</view> 
 
<!--首页--> 
<view hidden="{{currentTab!==0}}"> 
 tab_01 
</view> 
 
<!--搜索--> 
<view hidden="{{currentTab!==1}}"> 
 tab_02 
</view> 
 
<!--我--> 
<view hidden="{{currentTab!==2}}"> 
 tab_03 
</view>

wxss:

page{ 
 display: flex; 
 flex-direction: column; 
 height: 100%; 
} 
.navbar{ 
 flex: none; 
 display: flex; 
 background: #fff; 
} 
.navbar .item{ 
 position: relative; 
 flex: auto; 
 text-align: center; 
 line-height: 80rpx; 
} 
.navbar .item.active{ 
 color: #FFCC00; 
} 
.navbar .item.active:after{ 
 content: ""; 
 display: block; 
 position: absolute; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 height: 4rpx; 
 background: #FFCC00; 
}

js:

var app = getApp() 
Page({ 
 data: { 
 navbar: ['首页', '搜索', '我'], 
 currentTab: 0 
 }, 
 navbarTap: function(e){ 
 this.setData({ 
 currentTab: e.currentTarget.dataset.idx 
 }) 
 } 
})

运行:

微信小程序实战之顶部导航栏(选项卡)(1)

如果大家还想深入学习,可以点击两个精彩的专题:javascript选项卡操作方法汇总 jquery选项卡操作方法汇总

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
Javascript调试工具(下载)
Jan 09 Javascript
JavaScript 密码强度判断代码
Sep 05 Javascript
jquery 学习之一 对象访问
Nov 23 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
javascript this详细介绍
Sep 19 Javascript
关于TypeScript中import JSON的正确姿势详解
Jul 25 Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 Javascript
vant时间控件使用方法详解
Dec 24 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 #Javascript
微信小程序教程系列之新建页面(4)
Apr 17 #Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 #Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 #Javascript
微信小程序商城项目之商品属性分类(4)
Apr 17 #Javascript
微信小程序商城项目之侧栏分类效果(1)
Apr 17 #Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 #Javascript
You might like
php xml常用函数的集合(比较详细)
2013/06/06 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
php实现webservice实例
2014/11/06 PHP
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
JS cookie中文乱码解决方法
2014/01/28 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
vue实现评论列表功能
2019/10/25 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
深入理解Python中各种方法的运作原理
2015/06/15 Python
python自动zip压缩目录的方法
2015/06/28 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
python中的协程深入理解
2019/06/10 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
设计毕业生简历中的自我评价
2013/10/01 职场文书
校友会欢迎辞
2014/01/13 职场文书
写给女朋友的检讨书
2014/01/28 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
捐书仪式主持词
2015/07/04 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记