用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序 选项卡demo

纸飞机 2018-3-8 09:34

———-demo.wxss————.swiper-tab{ width: 100%; border-bottom: 2rpx solid #777777; text-align: center; line-height: 80rpx;} .swiper-tab-list{ font-size: 30rpx; display: in ...

———-demo.wxss————

  1. .swiper-tab{
  2. width: 100%;
  3. border-bottom: 2rpx solid #777777;
  4. text-align: center;
  5. line-height: 80rpx;}
  6. .swiper-tab-list{ font-size: 30rpx;
  7. display: inline-block;
  8. width: 33.33%;
  9. color: #777777;
  10. }
  11. .on{ color: #da7c0c;
  12. border-bottom: 5rpx solid #da7c0c;}
  13. .swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }
  14. .swiper-box view{
  15. text-align: center;
  16. }

———-demo.wxml————

  1. class="swiper-tab">
  2. class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">哈哈
  3. class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">呵呵
  4. class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">嘿嘿
  5. current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
  6. 我是哈哈
  7. 我是呵呵
  8. 我是嘿嘿

———-demo.js————

  1. Page( {
  2. data: {
  3. /**
  4. * 页面配置
  5. */
  6. winWidth: 0,
  7. winHeight: 0,
  8. // tab切换
  9. currentTab: 0,
  10. },
  11. onLoad: function() {
  12. var that = this;
  13. /**
  14. * 获取系统信息
  15. */
  16. wx.getSystemInfo( {
  17. success: function( res ) {
  18. that.setData( {
  19. winWidth: res.windowWidth,
  20. winHeight: res.windowHeight
  21. });
  22. }
  23. });
  24. },
  25. /**
  26. * 滑动切换tab
  27. */
  28. bindChange: function( e ) {
  29. var that = this;
  30. that.setData( { currentTab: e.detail.current });
  31. },
  32. /**
  33. * 点击tab切换
  34. */
  35. swichNav: function( e ) {
  36. var that = this;
  37. if( this.data.currentTab === e.target.dataset.current ) {
  38. return false;
  39. } else {
  40. that.setData( {
  41. currentTab: e.target.dataset.current
  42. })
  43. }
  44. }
  45. })
鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏