微信小程序选项卡demo

———-demo.wxss————

.swiper-tab{  width: 100%;  border-bottom: 2rpx solid #777777;  text-align: center;  line-height: 80rpx;}
.swiper-tab-list{  font-size: 30rpx;  display: inline-block;  width: 33.33%;  color: #777777;
}
.on{ color: #da7c0c;  border-bottom: 5rpx solid #da7c0c;}  .swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }
.swiper-box view{  text-align: center;
}

———-demo.wxml————

<view class="swiper-tab">  <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">哈哈</view>  <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">呵呵</view>  <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">嘿嘿</view>
</view>  <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">  <!-- 我是哈哈 -->  <swiper-item>  <view>我是哈哈</view>  </swiper-item>  <!-- 我是呵呵 -->  <swiper-item>  <view>我是呵呵</view>  </swiper-item>  <!-- 我是嘿嘿 -->  <swiper-item>  <view>我是嘿嘿</view>  </swiper-item>
</swiper>

———-demo.js————

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  });  }  });  },  /** * 滑动切换tab */  bindChange: function( e ) {  var that = this;  that.setData( { currentTab: e.detail.current });  },  /** * 点击tab切换 */  swichNav: function( e ) {  var that = this;  if( this.data.currentTab === e.target.dataset.current ) {  return false;  } else {  that.setData( {  currentTab: e.target.dataset.current  })  }  }
})

微信小程序选项卡demo相关推荐

微信小程序开源Demo精选
微信小程序开源Demo精选原文:微信小程序开源Demo精选 1. 仿QQ应用程序(#社交 #聊天 #SNS) 地址:https://github.com/xiehui999/SmallAppForQ ...
微信小程序学习DEMO，微信小程序初学者可以参考
这是一套微信初学者学习DEMO源码,有需要的同学可到下载频道下载~ 这个微信小程序包含了以下几个功能,非常适合微信小程序开发小白,公司实习生,毕业设计参考. 1.朋友圈功能,可以发布朋友圈,九官格图片 ...
目前为止最全的微信小程序项目实例 --- demo锦集
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
微信小程序选项卡数组列表单项选择切换效果
这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法效果如图: wxml:<view class="item" wx:for="{{data}}&qu ...
微信小程序--计算器demo实现
最近微信小程序很火,根据官网简单实现计算器功能,重在动手体验. 微信小程序官网:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 计算器功能:加 ...
微信小程序入门demo
最近在研究微信小程序,看到了别人的demo,照着做后发现了一些小问题,所以就重写了一个,加了一些自己的理解. 准备工作 IDE搭建知识准备从零开始 app.js app.json app.wxml ...
微信小程序入门Demo（石头剪刀布）
前言:这是本人第一次写博客,希望对和我一样刚入门微信小程序的新手们有所帮助.因为本人主要做安卓开发,对web前端知识也只是用了一天时间恶补了下.对于微信小程序,我会由浅入深,和大家一起多总结多学习. ...
微信小程序开发demo
前言链接: https://pan.baidu.com/s/16j8WCMv2JrRK2OzwvMwZ1w 提取码: 34mp 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么 ...
【福利】微信小程序精选Demo合集
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 小编最近 ...
微信小程序聊天demo
本身经历历时1个月,完成微信小程序前后端聊天Demo,前端(微信小程序)后端(java),服务器[linux(nginx)],涵盖功能,微信授权认证首页,主页面,不同聊天的房间以及分类,个人信息页面 ...

微信小程序选项卡demo

微信小程序选项卡demo相关推荐

最新文章

热门文章

微信小程序 选项卡demo

微信小程序 选项卡demo相关推荐

最新文章

热门文章

微信小程序选项卡demo

微信小程序选项卡demo相关推荐