小程序左右標(biāo)簽滑塊排行榜

效果:

<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});}} })

往后余生，唯獨(dú)有你
簡書作者：達(dá)叔小生
90后帥氣小伙，良好的開發(fā)習(xí)慣；獨(dú)立思考的能力；主動(dòng)并且善于溝通
簡書博客： https://www.jianshu.com/u/c785ece603d1

結(jié)語

• 下面我將繼續(xù)對 其他知識 深入講解 ，有興趣可以繼續(xù)關(guān)注
• 小禮物走一走 or 點(diǎn)贊

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結(jié)

以上是生活随笔為你收集整理的小程序左右标签滑块排行榜的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。