WeChat アプレットのカスタム スクロール ビューのサンプル コード

 <スクロールビュー スクロールx 
  クラス="スクロールビュー" 
  バインドスクロール="bindScroll">
 <block wx:for="{{arr}}" wx:key="index">
 <view class="scroll-item">スクロールビュー{{index}}</view> 
 </ブロック>
 </スクロールビュー>
 
 <!-- スクロールバー -->
 <view class="slide">
 <view class='スライドバー'>
 <view class="slide-action" 
  スタイル="width:{{slideWidth}}rpx; margin-left:{{slideLeft<=1 ? 0 : slideLeft+'rpx'}};">
 </ビュー>
 </ビュー>
 </ビュー>
 

 ページ{
 高さ：100vh;
 背景: rgb(111, 80, 65)
 }
 .スクロールビュー{
 ディスプレイ: フレックス;
 幅: 100%;
 空白: ラップなし;
 パディングトップ: 20rpx;
 } 

 .スクロールアイテム:n番目の子(1){
 左マージン: 40rpx;
 } 

 .スクロールアイテム{
 表示: インラインブロック;
 幅: 550rpx;
 高さ: 463rpx;
 背景: rgba(199, 180, 165);
 境界線の半径: 20rpx;
 右マージン: 30rpx;
 色: #fff;
 } 

 。スライド{
 背景:rgb(111, 80, 65);
 幅:100%;
 パディングトップ:20rpx;
 }
 .スライド .スライドバー{
 幅:180rpx;
 マージン:0 自動;
 高さ: 4rpx;
 背景: rgba(255,255,255,.2);
 } 

 .スライド .スライドバー .スライドアクション{
 高さ:100%;
 背景:#fff;
 } 

 /**
 * ページの初期データ */
 データ： {
 編曲: 10,
 スライド幅: '',
 スライド左: ''
 },

 /**
 * ライフサイクル機能 - ページの読み込みをリッスンする*/
 onLoad: 関数 (オプション) {
 // 比率を計算します this.calcRatio();
 },

 /**
 * 比率を計算する */
 計算比率() {
 var windowWidth = wx.getSystemInfoSync().windowWidth;
 // リストの合計の長さを計算します var totalLength = (this.data.arr * 580) + 40;
 // スライダーの比率を計算します var slideRatio = 180 / totalLength * (750 / windowWidth);
 /**
 * 画面の合計長さ / リストの合計長さ = スライダーとスクロールバーの長さの比率 * スライダーとスクロールバーの長さの比率 * スクロールリストの長さ = スライダーの幅 */
 var スライダーの幅 = 750 / 合計長さ * 180;
 this.setData({
 スライド幅: スライダー幅、
 合計長: 合計長、
 スライド比率: スライド比率
 })
 },

 /**
 * モニターのスクロール */
 バインドスクロール(e) {
 this.setData({
 スライド左: e.detail.scrollLeft * this.data.slideRatio
 })
 },