微信小程序实现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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
js setTimeout 常见问题小结
Aug 13 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
Aug 28 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
Openlayers学习之地图比例尺控件
Sep 28 Javascript
微信小程序实现页面左右滑动
Nov 16 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 Javascript
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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
yii用户注册表单验证实例
2015/12/26 PHP
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
JS模式之简单的订阅者和发布者模式完整实例
2015/06/30 Javascript
在IE8上JS实现combobox支持拼音检索功能
2016/05/23 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
JavaScript实现多层颜色选项卡嵌套
2020/09/21 Javascript
[01:00] DOTA2英雄背景故事第五期之重力引力法则谜团
2020/07/16 DOTA
python万年历实现代码 含运行结果
2017/05/20 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
基于Python测试程序是否有错误
2020/05/16 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
python使用smtplib模块发送邮件
2020/12/17 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
打印机墨盒:123Inkjets
2017/02/16 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
Myholidays美国:在线旅游网站
2019/08/16 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
中学生团员自我评价分享
2013/12/07 职场文书
网站开发实习生的自我评价
2013/12/11 职场文书
师范生自荐信模板
2014/05/28 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
vue修饰符.capture和.self的区别
2022/04/22 Vue.js