微信小程序自定義scroll-view的實(shí)例代碼
小程序自定義 scroll-view 滾動(dòng)條
話不多說(shuō), 直接上效果圖
效果圖
wxml代碼
<scroll-view scroll-x class="scroll-view" bindscroll="bindScroll"> <block wx:for="{{arr}}" wx:key="index"> <view class="scroll-item">scroll-view{{index}}</view> </block> </scroll-view> <!-- 滾動(dòng)條 --> <view class="slide"> <view class='slide-bar'> <view class="slide-action" style="width:{{slideWidth}}rpx; margin-left:{{slideLeft<=1 ? 0 : slideLeft+'rpx'}};"> </view> </view> </view>
wxss代碼
page{ height: 100vh; background: rgb(111, 80, 65) } .scroll-view{ display: flex; width: 100%; white-space: nowrap; padding-top: 20rpx; } .scroll-item:nth-child(1){ margin-left: 40rpx; } .scroll-item { display: inline-block; width: 550rpx; height: 463rpx; background: rgba(199, 180, 165); border-radius: 20rpx; margin-right: 30rpx; color: #fff; } .slide{ background:rgb(111, 80, 65); width:100%; padding-top:20rpx; } .slide .slide-bar{ width:180rpx; margin:0 auto; height: 4rpx; background: rgba(255,255,255,.2); } .slide .slide-bar .slide-action{ height:100%; background:#fff; }
js代碼
/** * 頁(yè)面的初始數(shù)據(jù) */ data: { arr: 10, slideWidth: '', slideLeft: '' }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 */ onLoad: function (options) { // 計(jì)算比例 this.calcRatio(); }, /** * 計(jì)算比例 */ calcRatio() { var windowWidth = wx.getSystemInfoSync().windowWidth; // 計(jì)算列表總長(zhǎng)度 var totalLength = (this.data.arr * 580) + 40; // 計(jì)算滑塊的比例 var slideRatio = 180 / totalLength * (750 / windowWidth); /** * 屏幕總長(zhǎng)度 / 列表總長(zhǎng)度 = 滑塊占滾動(dòng)條長(zhǎng)度的比例 * 滑塊占滾動(dòng)條長(zhǎng)度的比例 * 滾動(dòng)列表的長(zhǎng)度 = 滑塊的寬度 */ var sliderWidth = 750 / totalLength * 180; this.setData({ slideWidth: sliderWidth, totalLength: totalLength, slideRatio: slideRatio }) }, /** * 監(jiān)聽(tīng)滾動(dòng) */ bindScroll(e) { this.setData({ slideLeft: e.detail.scrollLeft * this.data.slideRatio }) },
附:scroll-view可滾動(dòng)視圖區(qū)域
總結(jié)
到此這篇關(guān)于微信小程序自定義scroll-view的文章就介紹到這了,更多相關(guān)微信小程序自定義scroll-view內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 微信小程序scroll-view實(shí)現(xiàn)自定義滾動(dòng)條
- 微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動(dòng)效果
- 微信小程序scroll-view實(shí)現(xiàn)左右聯(lián)動(dòng)
- 微信小程序scroll-view實(shí)現(xiàn)上拉加載數(shù)據(jù)重復(fù)的解決方法
- 微信小程序scroll-view不能左右滑動(dòng)問(wèn)題的解決方法
- 小程序Scroll-view上拉滾動(dòng)刷新數(shù)據(jù)
- 微信小程序scroll-view指定滾動(dòng)元素起始位置怎么做
相關(guān)文章
javascript DOM對(duì)象的學(xué)習(xí)實(shí)例代碼
javascript DOM對(duì)象的學(xué)習(xí)實(shí)例代碼2009-06-06JavaScript高級(jí)程序設(shè)計(jì)(第三版)學(xué)習(xí)筆記6、7章
這篇文章主要介紹了JavaScript高級(jí)程序設(shè)計(jì)(第三版)學(xué)習(xí)筆記6、7章 的相關(guān)資料,需要的朋友可以參考下2016-03-03判斷一個(gè)變量是數(shù)組Array類(lèi)型的方法
JavaScript中如何判斷一個(gè)變量是數(shù)組Array類(lèi)型呢?本文向大家提供一個(gè)比較不錯(cuò)的方法,可以說(shuō)是無(wú)懈可擊了2013-09-09用js實(shí)現(xiàn)多域名不同文件的調(diào)用方法
用js實(shí)現(xiàn)多域名不同文件的調(diào)用方法...2007-01-01js+canvas實(shí)現(xiàn)可自動(dòng)吸附閉合的鼠標(biāo)繪制多邊形
這篇文章主要為大家詳細(xì)介紹了js+canvas實(shí)現(xiàn)可自動(dòng)吸附閉合的鼠標(biāo)繪制多邊形,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07統(tǒng)一接口:為FireFox添加IE的方法和屬性的js代碼
統(tǒng)一接口:為FireFox添加IE的方法和屬性的js代碼...2007-03-03JavaScript實(shí)現(xiàn)簡(jiǎn)單打地鼠游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單打地鼠游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10