用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

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

微信小程序获取用户头像和昵称,顶部导航栏的实现

纸飞机 2018-3-8 09:35

作者:Fenchow,来自原文地址一:顶部导航栏的实现 11 22 33 44 55 我是哈哈 我是呵呵 ...

作者:Fenchow,来自

原文地址

一:顶部导航栏的实现

  1. class="swiper-tab">
  2. class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11
  3. class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">22
  4. class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">33
  5. class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">44
  6. class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">55
  7. current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
  8. 我是哈哈
  9. 我是呵呵
  10. 我是嘿嘿
  11. 我是嘿嘿
  12. 我是嘿嘿
  1. .swiper-tab{
  2. width: 100%;
  3. border-bottom: 2rpx solid #777777;
  4. text-align: center;
  5. line-height: 80rpx;
  6. }
  7. .swiper-tab-list{ font-size: 30rpx;
  8. display: inline-block;
  9. width: 20%;
  10. color: #777777;
  11. }
  12. .on{ color: #da7c0c;
  13. border-bottom: 5rpx solid #da7c0c;}
  14. .swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; }
  15. .swiper-box view{
  16. text-align: center;
  17. }
  1. var app = getApp()
  2. Page( {
  3. data: {
  4. /**
  5. * 页面配置
  6. */
  7. winWidth: 0,
  8. winHeight: 0,
  9. // tab切换
  10. currentTab: 0,
  11. },
  12. onLoad: function() {
  13. var that = this;
  14. /**
  15. * 获取系统信息
  16. */
  17. wx.getSystemInfo( {
  18. success: function( res ) {
  19. that.setData( {
  20. winWidth: res.windowWidth,
  21. winHeight: res.windowHeight
  22. });
  23. }
  24. });
  25. },
  26. /**
  27. * 滑动切换tab
  28. */
  29. bindChange: function( e ) {
  30. var that = this;
  31. 邀请

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏