微信小程序 选项卡的简单实例


Posted in Javascript onMay 24, 2017

微信小程序 选项卡的简单实例

看下效果

微信小程序 选项卡的简单实例

代码:

home.wxml

<!--pages/home/home.wxml-->
<view class="swiper-tab"> 
  <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">热门</view> 
  <view class="swiper-tab-item {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">关注</view> 
  <view class="swiper-tab-item {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">好友</view> 
</view> 

<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 80}}px" bindchange="bindChange"> 
  <swiper-item> 
   <view>热门</view> 
  </swiper-item> 
  <swiper-item> 
   <view>关注</view> 
  </swiper-item> 
  <swiper-item> 
   <view>好友</view> 
  </swiper-item> 
</swiper>

home.wxss

/* pages/home/home.wxss */
.swiper-tab{ 
  width: 100%; 
  border-bottom: 2rpx solid #eeeeee; 
  text-align: center; 
  line-height: 80rpx;} 
.swiper-tab-item{ font-size: 30rpx; 
  display: inline-block; 
  width: 33.33%; 
  color: #666666; 
} 
.on{ color: #f10b2e; 
  border-bottom: 5rpx solid #f10b2e;} 

.swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; } 
.swiper-box view{ 
  text-align: center; 
}

home.js

// pages/home/home.js
var app = getApp()
Page({
 data: {

  winWidth: 0,
  winHeight: 0,
  // tab切换 
  currentTab: 0,
 },
 onLoad: function () {
  var that = this;


  wx.getSystemInfo({

   success: function (res) {
    that.setData({
     winWidth: res.windowWidth,
     winHeight: res.windowHeight
    });
   }

  });
 },


 bindChange: function (e) {

  var that = this;
  that.setData({ currentTab: e.detail.current });

 },

 swichNav: function (e) {

  var that = this;

  if (this.data.currentTab === e.target.dataset.current) {
   return false;
  } else {
   that.setData({
    currentTab: e.target.dataset.current
   })
  }
 }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery下实现overlay遮罩层代码
Aug 25 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 Javascript
angular2 NgModel模块的具体使用方法
Apr 10 Javascript
微信小程序工具函数封装
Oct 28 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
JS回调函数基本定义与用法实例分析
May 24 #Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 #jQuery
详解前后端分离之VueJS前端
May 24 #Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 #jQuery
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 #Javascript
使用jQuery.Pin垂直滚动时固定导航
May 24 #jQuery
bootstrap table使用入门基本用法
May 24 #Javascript
You might like
基于php伪静态的实现详细介绍
2013/04/28 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
PHP框架性能测试报告
2016/05/08 PHP
PHP Include文件实例讲解
2019/02/15 PHP
List the Codec Files on a Computer
2007/06/18 Javascript
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
跟着JQuery API学Jquery 之二 属性
2010/04/09 Javascript
js中将具有数字属性名的对象转换为数组
2011/03/06 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
2018/10/25 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
Python3.2模拟实现webqq登录
2016/02/15 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
Python读取Excel表格,并同时画折线图和柱状图的方法
2018/10/14 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
领班岗位职责范文
2014/02/06 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
商场主管竞聘书
2014/03/31 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
关心下一代工作先进事迹
2014/08/15 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
给老师的一封感谢信
2015/01/20 职场文书
教师外出学习心得体会
2016/01/18 职场文书