微信小程序 tabs选项卡效果的实现


Posted in Javascript onJanuary 05, 2017

微信小程序 tabs选项卡效果

前言:

最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释。正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了。很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下。思路如下:

1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类

2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块

3.使用三目运算通过点击获取导航索引,根据索引判断是否添加当前类【备注,这里我将点击事件绑定在父级导航栏,通过target对象得到点击触发的事件对象属性】

请结合如下效果图:

微信小程序 tabs选项卡效果的实现

 接下来直接查看源码:

demo.wxml:

<view class="tab"> 
<view class="tab-left" bindtap="tabFun"> 
 <view class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="tab-hd01" data-id="0">tab-hd01</view> 
 <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="tab-hd02" data-id="1">tab-hd01</view> 
 <view class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="tab-hd03" data-id="2">tab-hd01</view> 
 <view class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="tab-hd04" data-id="3">tab-hd01</view> 
</view> 

<view class="tab-right"> 
 <view class="right-item {{tabArr.curBdIndex=='0'? 'active' : ''}}">tab-bd01</view> 
 <view class="right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd02</view> 
 <view class="right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd03</view> 
 <view class="right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}">tab-bd04</view> 
</view> 
</view>

demo.js:

Page( { 
data: { 
 tabArr: { 
  curHdIndex: 0, 
  curBdIndex: 0 
 }, 
}, 
tabFun: function(e){ 
 //获取触发事件组件的dataset属性 
 var _datasetId=e.target.dataset.id; 
 console.log("----"+_datasetId+"----"); 
 var _obj={}; 
 _obj.curHdIndex=_datasetId; 
 _obj.curBdIndex=_datasetId; 
 this.setData({ 
  tabArr: _obj 
 }); 
}, 
onLoad: function( options ) { 
 alert( "------" ); 
} 
});

demo.wxss:

.tab{ 
 display: flex; 
 flex-direction: row; 
} 
.tab-left{ 
 width: 200rpx; 
 line-height: 160%; 
 border-right: solid 1px gray; 
} 
.tab-left view{ 
 border-bottom: solid 1px red; 
} 
.tab-left .active{ 
 color: #f00; 
} 
.tab-right{ 
 line-height: 160%; 
} 
.tab-right .right-item{ 
 padding-left: 15rpx; 
 display: none; 
} 
.tab-right .right-item.active{ 
 display: block; 
}

最终演示效果如下:

微信小程序 tabs选项卡效果的实现

微信小程序 tabs选项卡效果的实现

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery之empty()与remove()区别说明
Sep 10 Javascript
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
更换select下拉菜单背景样式的实现代码
Dec 20 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
js实现登录验证码
Dec 22 Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
jQuery密码强度验证控件使用详解
Jan 05 #Javascript
jquery广告无缝轮播实例
Jan 05 #Javascript
JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome
Jan 05 #Javascript
javascript添加前置0(补零)的几种方法
Jan 05 #Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 #Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 #Javascript
bootstrap table配置参数例子
Jan 05 #Javascript
You might like
PHP中strtr字符串替换用法详解
2014/11/26 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
UpdatePanel和Jquery冲突的解决方法
2013/04/01 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
jquery Easyui快速开发总结
2015/08/20 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
详解JavaScript作用域、作用域链和闭包的用法
2020/09/03 Javascript
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
python2 与python3的print区别小结
2018/01/16 Python
python读取和保存视频文件
2018/04/16 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
python设置中文界面实例方法
2020/10/27 Python
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
英国在线花园中心:You Garden
2018/06/03 全球购物
药品采购员岗位职责
2014/02/08 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
2014年法务工作总结
2014/12/11 职场文书
导游欢送词
2015/01/31 职场文书
小学副班长竞选稿
2015/11/21 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android