微信小程序实现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文件 document.createElement
Oct 14 Javascript
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
JavaScript 数组中最大最小值
Jun 05 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
用js制作淘宝放大镜效果
Oct 28 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 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
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
Views rows style模板重写代码
2011/05/16 PHP
php常量详细解析
2015/10/27 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
PHP随机获取未被微信屏蔽的域名(微信域名检测)
2017/03/19 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
Element UI框架中巧用树选择器的实现
2018/12/12 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
Python实现对excel文件列表值进行统计的方法
2015/07/25 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
解决Python正则表达式匹配反斜杠''\''问题
2019/07/17 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
python selenium操作cookie的实现
2020/03/18 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
25道Java面试题集合
2013/05/21 面试题
对标管理实施方案
2014/03/12 职场文书
小学生作文评语大全
2014/04/21 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
结婚通知短信大全
2015/04/17 职场文书