微信小程序实现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 相关文章推荐
UI Events 用户界面事件
Jun 27 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
使用javascript获取页面名称
Dec 23 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
写一个Vue Popup组件
Feb 25 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
smarty内置函数section的用法
2015/01/22 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
JQuery触发事件例如click
2013/09/11 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
2016/08/31 Javascript
jQuery实现文章图片弹出放大效果
2017/04/06 jQuery
webpack打包js的方法
2018/03/12 Javascript
Vue 全局loading组件实例详解
2018/05/29 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
微信小程序实现图片选择并预览功能
2019/07/25 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
JS变量提升及函数提升实例解析
2020/09/03 Javascript
Python从MP3文件获取id3的方法
2015/06/15 Python
Python 的描述符 descriptor详解
2016/02/27 Python
Python第三方库的安装方法总结
2016/06/06 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
Python Grid使用和布局详解
2018/06/30 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
详解用Python调用百度地图正/逆地理编码API
2020/07/02 Python
Python创建自己的加密货币的示例
2021/03/01 Python
外贸业务员的岗位职责
2013/11/23 职场文书
少儿节目主持串词
2014/04/02 职场文书
保护母亲河倡议书
2014/04/14 职场文书
车队司机个人自我鉴定
2014/04/17 职场文书
就职演讲稿范文
2014/05/19 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫