用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 小技巧系列 查看内容

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

天下雪 2017-3-29 00:13

作者:Fenchow,来自原文地址一:顶部导航栏的实现view class="swiper-tab" view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav"11/view view class="swiper-tab-li ...

作者:Fenchow,来自原文地址

一:顶部导航栏的实现

  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. <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 31}}px" bindchange="bindChange">
  9. <!-- 我是哈哈 -->
  10. <swiper-item>
  11. <view>我是哈哈</view>
  12. </swiper-item>
  13. <!-- 我是呵呵 -->
  14. <swiper-item>
  15. <view>我是呵呵</view>
  16. </swiper-item>
  17. <!-- 我是嘿嘿 -->
  18. <swiper-item>
  19. <view>我是嘿嘿</view>
  20. </swiper-item>
  21. <swiper-item>
  22. <view>我是嘿嘿</view>
  23. </swiper-item>
  24. <swiper-item>
  25. <view>我是嘿嘿</view>
  26. </swiper-item>
  27. </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. 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. 邀请
    鲜花
    鲜花 (3)
    鸡蛋
    鸡蛋

    刚表态过的朋友 (3 人)

    分享至 : QQ空间
    收藏
    来自: 原文地址

    相关阅读