微信小程序实现tab切换效果


Posted in Javascript onNovember 21, 2017

微信小程序之tab切换效果,如图:

微信小程序实现tab切换效果

最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能)

.wxml代码:

<view class="body">
 <view class="nav bc_white">
  <view class="{{selected?'red':'default'}}" bindtap="selected">系统提醒</view>
  <view class="{{selected1?'red':'default'}}" bindtap="selected1">优惠活动</view>
 </view>
 <view class="{{selected?'show':'hidden'}}">for system</view>
 <view class="{{selected1?'show':'hidden'}}">for activity</view>
</view>

.wxss代码:

page{background-color:#edf0f3;}
.nav{width:100%;height:100rpx;display:flex;flex-direction:row;}
.default{line-height:100rpx;text-align:center;flex:1;border-right:1px solid gainsboro;color:#000;font-weight:bold;font-size:28rpx;}
.red{line-height:100rpx;text-align:center;color:#fc5558;flex:1;border-right:1px solid gainsboro;font-weight:bold;font-size:28rpx;}
.show{display:block;text-align:center;line-height:200rpx;}
.hidden{display:none;text-align:center;line-height:200px;}

.js代码:

Page({
  data:{
    selected:true,
    selected1:false
    },
  selected:function(e){
    this.setData({
      selected1:false,
      selected:true
    })
  },
  selected1:function(e){
    this.setData({
      selected:false,
      selected1:true
    })
  }
})

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

Javascript 相关文章推荐
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
基于jQuery的左右滚动实现代码
Dec 03 Javascript
理清apply(),call()的区别和关系
Aug 14 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
js微信支付实现代码
Dec 22 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 Javascript
详解Vue2的diff算法
Jan 06 Vue.js
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 #jQuery
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 #Javascript
值得收藏的vuejs安装教程
Nov 21 #Javascript
jquery-file-upload 文件上传带进度条效果
Nov 21 #jQuery
jquery ajaxfileupload异步上传插件
Nov 21 #jQuery
Vue + Vue-router 同名路由切换数据不更新的方法
Nov 20 #Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 #Javascript
You might like
PHP将XML转数组过程详解
2013/11/13 PHP
php jsonp单引号转义
2014/11/23 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
Knockout text绑定DOM的使用方法
2013/11/15 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
详解如何探测小程序返回到webview页面
2019/05/14 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
美国迪克体育用品商店:DICK’S Sporting Goods
2018/07/24 全球购物
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
父亲八十大寿答谢词
2014/01/23 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
婚宴领导致辞
2015/07/28 职场文书
公司借款担保书
2015/09/22 职场文书
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js