您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“微信小程序scroll-view怎么實(shí)現(xiàn)自定義滾動(dòng)條”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“微信小程序scroll-view怎么實(shí)現(xiàn)自定義滾動(dòng)條”吧!
html
<!-- 九宮格 --> <scroll-view class="my-grid" scroll-x="true" bindscroll="getleft"> <view class="grid-item" wx:for="{{gridlist}}" wx:key="index"> <text>{{item.name}}</text> </view> </scroll-view> <!--滾動(dòng)條部分--> <view class="slide"> <view class='slide-bar' > <view class="slide-show" ></view> </view> </view>
js
Page({ data: { slideWidth:'',//滑塊寬 slideLeft:0 ,//滑塊位置 slideRatio:'', windowWidth:'', gridlist:[ {name:'家樂(lè)福'}, {name:'家樂(lè)福'}, {name:'家樂(lè)福'}, {name:'家樂(lè)福'}, {name:'家樂(lè)福'}, {name:'家樂(lè)福'}, {name:'家樂(lè)福'}, {name:'家樂(lè)福'}, {name:'家樂(lè)福'}, {name:'家樂(lè)福'}, {name:'家樂(lè)福'}, {name:'家樂(lè)福'}, {name:'家樂(lè)福'}, {name:'家樂(lè)福'}, {name:'家樂(lè)福'}, ] }, onLoad: function() { var self = this ; var systemInfo = wx.getSystemInfoSync() ; self.setData({ windowWidth:systemInfo.windowWidth }); self.getRatio(); }, //根據(jù)分類(lèi)獲取比例 getRatio(){ var self = this ; var _totalLength = self.data.gridlist.length * 150; //分類(lèi)列表總長(zhǎng)度 var _ratio = 230 / _totalLength * (750 / this.data.windowWidth); //滾動(dòng)列表長(zhǎng)度與滑條長(zhǎng)度比例 var _showLength = 750 / _totalLength * 230; //當(dāng)前顯示紅色滑條的長(zhǎng)度(保留兩位小數(shù)) console.log(_totalLength,_ratio,_showLength) this.setData({ slideWidth: _showLength, totalLength: _totalLength, slideRatio:_ratio }) } , getleft:function(e){ this.setData({ slideLeft: e.detail.scrollLeft * this.data.slideRatio }) }, })
css
/* 九宮格樣式 */ .my-grid{ width: 100%; height: 220rpx; background-color: #00bfff; white-space: nowrap; } .my-grid .grid-item{ width:150rpx; text-align:center; display:inline-block; height:115rpx; } .slide{ height:30rpx; background:#fff; width: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; }
到此,相信大家對(duì)“微信小程序scroll-view怎么實(shí)現(xiàn)自定義滾動(dòng)條”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún),關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。