微信小程序 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 相关文章推荐
轻轻松松学习JavaScript
Feb 25 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
判断javascript的数据类型(示例代码)
Dec 11 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
Node.js简单入门前传
Aug 21 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
js实现导航跟随效果
Nov 17 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
原生JS实现烟花效果
Mar 10 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
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
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
基于jquery的关于动态创建DOM元素的问题
2010/12/24 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
jquery中ready()函数执行的时机和window的load事件比较
2015/06/22 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
2018/10/25 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
vue中created和mounted的区别浅析
2019/08/13 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
python中查找excel某一列的重复数据 剔除之后打印
2013/02/10 Python
Python基础入门之seed()方法的使用
2015/05/15 Python
python制作mysql数据迁移脚本
2019/01/01 Python
python取余运算符知识点详解
2019/06/27 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
python实现计算器功能
2019/10/31 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
详解KMP算法以及python如何实现
2020/09/18 Python
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
总经理任命书
2014/03/29 职场文书
县委务虚会发言材料
2014/10/20 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书