Beispielcode für die benutzerdefinierte Scroll-Ansicht des WeChat-Applets

 <scroll-view scroll-x 
  Klasse="Scroll-Ansicht" 
  bindscroll="bindScroll">
 <block wx:für="{{arr}}" wx:key="index">
 <view class="scroll-item">Scroll-Ansicht{{index}}</view> 
 </block>
 </scroll-ansicht>
 
 <!-- Bildlaufleiste -->
 <Ansichtsklasse="Folie">
 <Ansichtsklasse='Schieberegler'>
 <Ansichtsklasse="Folienaktion" 
  Stil="Breite:{{Folienbreite}}rpx; linker Rand:{{Folienlink<=1 ? 0 : Folienlink+'rpx'}};">
 </Ansicht>
 </Ansicht>
 </Ansicht>
 

 Seite{
 Höhe: 100vh;
 Hintergrund: rgb(111, 80, 65)
 }
 .scroll-view{
 Anzeige: Flex;
 Breite: 100 %;
 Leerzeichen: Nowrap;
 Polsterung oben: 20rpx;
 } 

 .scroll-item:nth-child(1){
 Rand links: 40rpx;
 } 

 .scroll-Element {
 Anzeige: Inline-Block;
 Breite: 550rpx;
 Höhe: 463rpx;
 Hintergrund: rgba (199, 180, 165);
 Randradius: 20rpx;
 Rand rechts: 30rpx;
 Farbe: #fff;
 } 

 .gleiten{
 Hintergrund: RGB (111, 80, 65);
 Breite: 100 %;
 Polsterung oben: 20rpx;
 }
 .Folie .Folienleiste{
 Breite: 180rpx;
 Rand: 0 automatisch;
 Höhe: 4rpx;
 Hintergrund: rgba(255,255,255,.2);
 } 

 .Folie .Folienleiste .Folienaktion{
 Höhe: 100 %;
 Hintergrund:#fff;
 } 

 /**
 * Ausgangsdaten der Seite */
 Daten: {
 Ankunft: 10,
 Folienbreite: '',
 slideLeft: ''
 },

 /**
 * Lebenszyklusfunktion - auf Seitenladen warten*/
 onLoad: Funktion (Optionen) {
 // Berechnen Sie das Verhältnis this.calcRatio();
 },

 /**
 * Berechnen Sie das Verhältnis */
 berechneVerhältnis() {
 var Fensterbreite = wx.getSystemInfoSync().Fensterbreite;
 // Gesamtlänge der Liste berechnen var totalLength = (this.data.arr * 580) + 40;
 // Berechnen Sie das Verhältnis des Schiebereglers, var slideRatio = 180 / totalLength * (750 / windowWidth);
 /**
 * Gesamte Bildschirmlänge / Gesamte Listenlänge = Verhältnis der Länge des Schiebereglers zur Länge der Bildlaufleiste * Verhältnis der Länge des Schiebereglers zur Länge der Bildlaufleiste * Länge der Bildlaufliste = Breite des Schiebereglers */
 var Schiebereglerbreite = 750 / Gesamtlänge * 180;
 dies.setData({
 Schiebereglerbreite: Schiebereglerbreite,
 Gesamtlänge: Gesamtlänge,
 Schiebeverhältnis: Schiebeverhältnis
 })
 },

 /**
 * Bildschirm scrollen */
 bindScroll(e) {
 dies.setData({
 Folie links: e.detail.scrollLeft * this.data.slideRatio
 })
 },