微信小程序实现顶部普通选项卡效果(非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 url传值中文乱码之解决之道
Nov 20 Javascript
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
Jan 04 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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
缓存技术详谈―php
2006/12/14 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
php页面跳转代码 输入网址跳转到你定义的页面
2013/03/28 PHP
php获取twitter最新消息的方法
2015/04/14 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
Smarty模板配置实例简析
2019/07/20 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
js页面跳转常用的几种方式
2010/11/25 Javascript
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
js判断屏幕分辨率的代码
2013/07/16 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
vue filter 完美时间日期格式的代码
2019/08/14 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
Python实现公历(阳历)转农历(阴历)的方法示例
2017/08/22 Python
numpy中矩阵合并的实例
2018/06/15 Python
Python Datetime模块和Calendar模块用法实例分析
2019/04/15 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
优秀求职自荐信怎样写
2013/12/18 职场文书
高二地理教学反思
2014/01/24 职场文书
给面试官的感谢信
2014/02/01 职场文书
竞选部长演讲稿
2014/04/26 职场文书
大学生村官考核材料
2014/05/23 职场文书
努力工作保证书
2015/02/28 职场文书
开学典礼观后感
2015/06/15 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS