微信小程序实现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 相关文章推荐
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
Jquery实时监听input value的实例
Jan 26 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
简单实现js拖拽效果
Jul 25 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
js时间戳与日期格式之间相互转换
Dec 11 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
使用vue-cli编写vue插件的方法
Feb 26 Javascript
详解Angular路由之路由守卫
May 10 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
Sep 15 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
3
2006/10/09 PHP
解析PHP可变函数的经典用法
2013/06/20 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
python列表操作实例
2015/01/14 Python
Python中的变量和作用域详解
2016/07/13 Python
python append、extend与insert的区别
2016/10/13 Python
Python魔法方法详解
2019/02/13 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
tensorflow之并行读入数据详解
2020/02/05 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
求职信范文英文版
2014/01/05 职场文书
2014年五四青年节活动策划书
2014/04/22 职场文书
运动会口号16字
2014/06/07 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
2016公司年会主持词
2015/07/01 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技