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


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 相关文章推荐
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
vue data变量相互赋值后被实时同步的解决步骤
Aug 05 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
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/07/03 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
PHP的拦截器实例分析
2014/11/03 PHP
php socket通信(tcp/udp)实例分析
2016/02/14 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
PHP8.0新功能之Match表达式的使用
2020/07/19 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
小议javascript 设计模式 推荐
2009/10/28 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
JSON 教程 json入门学习笔记
2020/09/22 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
2014/01/09 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
python 为什么说eval要慎用
2019/03/26 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
世界上最大的字体市场:MyFonts
2020/01/10 全球购物
机械专业毕业生自荐信
2013/11/02 职场文书
元旦晚会邀请函
2014/02/01 职场文书
财务支持类个人的自我评价
2014/02/14 职场文书
市场专员岗位职责
2014/02/14 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
校长一岗双责责任书
2015/05/09 职场文书
离婚被告答辩状
2015/05/22 职场文书
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL