发布于 2018-03-13 11:58:43 | 55 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程,程序狗速度看过来!

微信 即时通讯软件

微信(英文名: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
 });


 },

完结。

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



相关阅读 :
微信小程序实现选项卡功能
微信小程序实现多宫格抽奖活动
微信小程序图片选择区域裁剪实现方法
JS中微信小程序自定义底部弹出框
微信小程序 (十七)input 组件详细介绍
微信小程序 navigator 跳转url传递参数
微信小程序异步处理详解
.NET微信开发之PC 端微信扫码注册和登录功能实现
微信公众平台之快递查询功能用法实例
微信公众平台实现获取用户OpenID的方法
php版微信小店API二次开发及使用示例
PHP版微信小店接口开发实例
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务