效果圖 
實現代碼
index.wxml
<scroll-view scroll-x="true" class="scroll-view-x" style="padding-top:10rpx" scroll-with-animation="true" wx:if="{{tlist[currentTab].secondList}}" scroll-left='0' bindscroll="getleft"> <!--內容區域--> <view> <view class="navigator_second" wx:for="{{tlist[currentTab].secondList}}" wx:for-item="childItem" bindtap="getProductList" data-id="{{childItem.id}}"> <image class="navigator_icon" src="{{childItem.icon}}"></image> <text class="navigator_text">{{childItem.name}}</text> </view> </view> <view wx:if="{{tlist[currentTab].thirdList}}"> <view class="navigator_second" wx:for="{{tlist[currentTab].thirdList}}" wx:for-item="childItem" data-id="{{childItem.id}}" bindtap="getProductList"> <image class="navigator_icon" src="{{childItem.icon}}" ></image> <text class="navigator_text">{{childItem.name}}</text> </view> </view> </scroll-view > <!--滾動條部分--> <view wx:if="{{slideShow}}" class="slide"> <view class='slide-bar' > <view class="slide-show" style="width:{{slideWidth}}rpx; margin-left:{{slideLeft<=1 ? 0 : slideLeft+'rpx'}};"></view> </view> </view>index.js
//獲取應用實例 var app = getApp(); Page({ data: { navigate_type:'',//分類類型，是否包含二級分類 slideWidth:'',//滑塊寬 slideLeft:0 ,//滑塊位置 totalLength:'',//當前滾動列表總長 slideShow:false, slideRatio:'' }, onLoad: function () { var self = this ; var systemInfo = wx.getSystemInfoSync() ; self.setData({ list: _list, windowHeight: app.globalData.navigate_type == 1 ? systemInfo.windowHeight : systemInfo.windowHeight - 35, windowWidth: systemInfo.windowWidth, navigate_type: app.globalData.navigate_type }) //計算比例 self.getRatio(); }, //根據分類獲取比例 getRatio(){ var self = this ; if (!self.data.tlist[self.data.currentTab].secondList || self.data.tlist[self.data.currentTab].secondList.length<=5){ this.setData({ slideShow:false }) }else{ var _totalLength = self.data.tlist[self.data.currentTab].secondList.length * 150; //分類列表總長度 var _ratio = 230 / _totalLength * (750 / this.data.windowWidth); //滾動列表長度與滑條長度比例 var _showLength = 750 / _totalLength * 230; //當前顯示紅色滑條的長度(保留兩位小數) this.setData({ slideWidth: _showLength, totalLength: _totalLength, slideShow: true, slideRatio:_ratio }) } } , //slideLeft動態變化 getleft(e){ this.setData({ slideLeft: e.detail.scrollLeft * this.data.slideRatio }) } })index.wxss
.scroll-view-x{ background-color: #fff; white-space: nowrap; } .navigator_second{ width:150rpx; text-align:center; display:inline-block; height:115rpx; } .navigator_icon{ width:60rpx; height:60rpx; } .navigator_text{ display:block; width:100%; font-size:24rpx } .slide{ height:30rpx; background:#fff; with:100%; padding:14rpx 0 5rpx 0 } .slide .slide-bar{ width:230rpx; margin:0 auto; height:1.5px; background:#eee; } .slide .slide-bar .slide-show{ height:100%; background-color:#ff6969; }
http://blog.csdn.net/hanxue_tyc/article/details/78674075