小程序模板网

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

一:顶部导航栏的实现

 

  1. <view class="swiper-tab">
  2. <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view>
  3. <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">22</view>
  4. <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" bindtap="swichNav">33</view>
  5. <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" bindtap="swichNav">44</view>
  6. <view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">55</view>
  7. </view>
  8.  
  9. <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
  10. <!-- 我是哈哈 -->
  11. <swiper-item>
  12. <view>我是哈哈</view>
  13. </swiper-item>
  14. <!-- 我是呵呵 -->
  15. <swiper-item>
  16. <view>我是呵呵</view>
  17. </swiper-item>
  18. <!-- 我是嘿嘿 -->
  19. <swiper-item>
  20. <view>我是嘿嘿</view>
  21. </swiper-item>
  22. <swiper-item>
  23. <view>我是嘿嘿</view>
  24. </swiper-item>
  25. <swiper-item>
  26. <view>我是嘿嘿</view>
  27. </swiper-item>
  28. </swiper>
 

  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. */
  18. wx.getSystemInfo( {
  19.  
  20. success: function( res ) {
  21. that.setData( {
  22. winWidth: res.windowWidth,
  23. winHeight: res.windowHeight
  24. });
  25. }
  26.  
  27. });
  28. },
  29. /**
  30. * 滑动切换tab
  31. */
  32. bindChange: function( e ) {
  33.  
  34. var that = this;


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/21627.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询