标题图
小程序左右标签滑块排行榜
效果:
效果
<view class="menu"> <view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="switchNav">成绩</view> <view class="{{currentTab==1?'select':'default'}}" data-current="1" bindtap="switchNav">勤奋</view> <view class="{{currentTab==2?'select':'default'}}" data-current="2" bindtap="switchNav">考勤</view></view><view class="content"> <view class="hr"></view> <swiper current="{{currentTab}}" style="height:800px;"> <swiper-item> <include src="cj.wxml" /> </swiper-item> <swiper-item> <include src="qinfen.wxml" /> </swiper-item> <swiper-item> <include src="kq.wxml" /> </swiper-item> </swiper></view>
.menu { display: flex; flex-direction: row; width: 100%; background-color: #09f; height: 40px; }.select { font-size: 12px; color: #09f; width: 33%; background-color: #fff; text-align: center; height: 30px; line-height: 30px; border: 1px solid #fff; border-radius: 3px; }.default { width: 33%; font-size: 12px; text-align: center; height: 30px; line-height: 30px; color: #fff; border: 1px solid #fff; border-radius: 3px; }.rank { width: 100%; text-align: center; background-color: #193d56; height: 200px; align-items: center; }.rank image { margin-top: 20px; border-radius: 50%; }.name { margin-top: 10px; margin-bottom: 10px; color: #fff; }.stat { color: #fff; font-size: 15px; }.item { display: flex; flex-direction: row; padding: 10px; align-items: center; }.num { width: 10%; }.desc { margin-left: 20px; width: 55%; }.name1 { font-size: 16px; }.school { margin-top: 5px; font-size: 12px; }.count { width: 15%; text-align: right; }.unit { width: 5%; font-size: 11px; text-align: right; }.line { border: 1px solid #ccc; opacity: 0.2; }.schoolName { width: 70%; }
{ "navigationBarTitleText": "排行榜"}
Page({ data: { currentTab: 0 }, switchNav: function(e) { var page = this; var index = e.target.dataset.current; if (this.data.currentTab == index) { return false; } else { page.setData({ currentTab: index }); } } })
作者:达叔小生
链接:https://www.jianshu.com/p/29928b8f9c02