这里有新鲜出炉的精品教程, 程序狗速度看过来!
微信 即时通讯软件
微信 (英文名: wechat) 是腾讯公司于 2011 年 1 月 21 日推出的一个为智能终端提供即时通讯服务的免费应用程序, 微信支持跨通信运营商跨操作系统平台通过网络快速发送免费语音短信视频图片和文字, 同时, 也可以使用通过共享流媒体内容的资料和基于位置的社交插件摇一摇漂流瓶朋友圈公众平台语音记事本等服务插件
这篇文章主要为大家详细介绍了微信小程序实现选项卡功能, 具有一定的参考价值, 感兴趣的小伙伴们可以参考一下
首先看看微信小程序上的选项卡的效果:
原理呢, 就是先布局好(这就不必说了吧), 然后在上面的每一个选项卡上都定义一个同样的点击事件, 然后给每一个组件上绑定一个唯一的标识符, 然后点击事件触发的时候, 获取到绑定的标识符, 判断当前点击的是哪个选项卡, 然后再判断下面该显示哪一块, 现在上代码:
- wxml:
- <view class="menu_box">
- <text class='menu1 {{menuTapCurrent=="0"?"borders":""}}'data-current="0"catchtap="menuTap">menu1</text>
- <text class='menu2 {{menuTapCurrent=="1"?"borders":""}}'data-current="1"catchtap="menuTap">menu2</text>
- </view>
- <view class="tab1" hidden="{{menuTapCurrent!='0'}}">tab1</view>
- <view class="tab2" hidden="{{menuTapCurrent!='1'}}">tab2</view>
- wxss:
- .menu_box{
- display: flex;
- height: 80rpx;
- }
- .menu1,.menu2{
- flex: 1;
- font-size:30rpx;
- line-height: 80rpx;
- text-align: center;
- }
- .borders{
- border-bottom: 4rpx solid #f00;
- color: #f00;
- }
- .tab1,.tab2{
- height: 300rpx;
- background: #23bff3;
- }
- .tab2{
- background: #ccc;
- }
- JS:
- menuTap:function(e){
- var current=e.currentTarget.dataset.current;// 获取到绑定的数据
- // 改变 menuTapCurrent 的值为当前选中的 menu 所绑定的数据
- this.setData({
- menuTapCurrent:current
- });
- },
完结
来源: http://www.phperz.com/article/18/0313/360849.html