小程序左右標簽滑塊排行榜

效果:

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

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

結語

• 下面我將繼續對 其他知識 深入講解 ，有興趣可以繼續關注
• 小禮物走一走 or 點贊

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。