微信小程序实现顶部普通选项卡效果(非swiper)


Posted in Javascript onJune 19, 2020

背景:前段时间写了一个抢红包小程序,里面涉及到了顶部选项卡,把它抽了出来。

效果图:

微信小程序实现顶部普通选项卡效果(非swiper)

下面直接上代码:

wxml:

<view class="navbar"> 
 <text wx:for="{{navbar}}" data-index="{{index}}" 
 class="item {{currentIndex==index?'active':''}}" 
 bindtap="navbarTab" wx:key="unique">{{item}}</text> 
 </view> 
 <view hidden="{{currentIndex!==0}}"> 
 
 </view> 
 <view hidden="{{currentIndex!==1}}"> 
 
 </view>

wxss:

.navbar{ 
 display: flex; 
 width: 100%; 
 flex-direction: row; 
 line-height: 80rpx; 
 position: fixed; 
 top: 0; 
} 
.navbar .item{ 
 flex: auto; 
 font-size: 30rpx; 
 text-align: center; 
 background: #fff; 
 font-weight: bold; 
} 
.navbar .item.active{ 
 color: #36DB2C; 
 position: relative; 
} 
.navbar .item.active::after{ 
 content: ""; 
 display: block; 
 position: absolute; 
 height: 4rpx; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 background: #36DB2C; 
}

js:

data: { 
 navbar: ["我发出的", "我收到的"], 
 currentIndex: 0,//tabbar索引 
 }, 
 navbarTab: function (e) { 
 this.setData({ 
 currentIndex: e.currentTarget.dataset.index 
 }); 
 },

以上是实现过程基本代码,省去了中间内容的代码。顶部个数是循环出来的,可以根据自己的实际需求设置。

附:swiper顶部选项卡链接

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

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

Javascript 相关文章推荐
js常用函数 不错
Sep 08 Javascript
通过ifame指向的页面高度调整iframe的高度
Oct 05 Javascript
javascript Select标记中options操作方法集合
Oct 22 Javascript
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
javascript中字符串拼接详解
Sep 26 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
react PropTypes校验传递的值操作示例
Apr 28 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 #Javascript
js实现本地时间同步功能
Aug 26 #Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 #jQuery
Javascript快速实现浏览器系统通知
Aug 26 #Javascript
深入浅出es6模板字符串
Aug 26 #Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 #Javascript
详解Angular4 路由设置相关
Aug 26 #Javascript
You might like
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
JavaScript通过元素的ID和name设置样式
2014/07/08 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
JS实现图片高亮展示效果实例
2015/11/24 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
JS实现页面内跳转的简单代码
2017/09/03 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
Anaconda入门使用总结
2018/04/05 Python
Python实现Dijkstra算法
2018/10/17 Python
python进阶之自定义可迭代的类
2019/08/20 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
Python实现手势识别
2020/10/21 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
纯css3实现照片墙效果
2014/12/26 HTML / CSS
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
六十大寿答谢词
2014/01/12 职场文书
《一株紫丁香》教学反思
2014/02/19 职场文书
追讨欠款律师函
2015/05/27 职场文书
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技