推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
微信小程序获取用户头像和昵称，顶部导航栏的实现
发布时间:2020-12-20
<viewclass="swiper-tab">
<viewclass="swiper-tab-list {{currentTab==0 ? 'on' : ''}}"data-current="0"bindtap="swichNav">11</view>
<viewclass="swiper-tab-list {{currentTab==1 ? 'on' : ''}}"data-current="1"bindtap="swichNav">22</view>
<viewclass="swiper-tab-list {{currentTab==2 ? 'on' : ''}}"data-current="2"bindtap="swichNav">33</view>
<viewclass="swiper-tab-list {{currentTab==3 ? 'on' : ''}}"data-current="3"bindtap="swichNav">44</view>
<viewclass="swiper-tab-list {{currentTab==4 ? 'on' : ''}}"data-current="4"bindtap="swichNav">55</view>
</view>
<swipercurrent="{{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-item>
<view>我是嘿嘿</view>
</swiper-item>
<swiper-item>
<view>我是嘿嘿</view>
</swiper-item>
</swiper>
.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:20%;
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;
}
var app = getApp()
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 ){
