Miniprogramm zur Implementierung des Paging-Effekts

<Ansichtsklasse="Seiten_Box">
  <view bindtap="pagesFn" class="{{pagesNum==0?'active':''}}" data-type="0">Vorherige Seite</view>
  <block wx:for="shujuDataArr11111" wx:key="index" wx:if="{{index+1<4}}">
    <view wx:if="{{tyindex+index <=maxPages}}" bindtap="pagesFn" class="{{pagesNum==tyindex+index?'active':''}}" data-type="{{tyindex+index}}">{{tyindex+index}}</view>
  </block>
  <view bindtap="pagesFn" class="{{pagesNum==-1?'active':''}}" data-type="-1">Nächste Seite</view>
</Ansicht>

// Seiten/ceshiPages/index.js
Seite({
 
  /**
   * Ausgangsdaten der Seite */
  Daten: {
    Seitenanzahl: 1,
    maxPages:15, //Gesamtzahl der Seiten tyindex:1
  },
 
  /**
   * Lebenszyklusfunktion - auf Seitenladen warten*/
  onLoad: Funktion (Optionen) {
 
  },
    SeitenFn:Funktion(e){
    let-Typ = e.currentTarget.dataset.type;
    lass _das = dies;
    if(typeof type == "string"){//Nächste Seiteif(type == "previous_page"){//Vorherige Seiteif(_that.data.pagesNum-1 >0){
          _das.setData({
            Seitennummer:_diese.Daten.Seitennummer-1,
            tyindex:_that.data.pagesNum-1,
          })
        }
        console.log(_das.Daten.Seitenanzahl)
      }else{//Nächste Seiteif(_that.data.pagesNum+1 <= _that.data.maxPages){
          wenn((_that.data.pagesNum+1)%3 == 0){
            _das.setData({
              tyindex:_that.data.pagesNum+1,
            })
          }
          _das.setData({
            Seitennummer:_diese.Daten.Seitennummer+1,
          })
          console.log(_das.Daten.Seitenanzahl)
        }
      }
    }anders{
      console.log(_das.Daten.Seitenanzahl)
      wenn(Typ>_das.Daten.SeitenAnzahl){
        wenn(Typ <= _that.data.maxPages){
          _das.setData({
            tyindex:Typ,
            Seitennummer:Typ,
          })
        }
      }
      wenn(Typ<_that.data.pagesNum){
        wenn(Typ >=1){
          _das.setData({
            tyindex:Typ,
            Seitennummer:Typ,
          })
        }
      }
      console.log(_das.Daten.Seitenanzahl)
    }
  },
  /**
   * Lebenszyklusfunktion - wartet auf den Abschluss der ersten Darstellung der Seite*/
  onReady: Funktion () {
 
  },
 
  /**
   * Lebenszyklusfunktion - Seitenanzeige überwachen*/
  onShow: Funktion () {
 
  },
 
  /**
   * Lebenszyklusfunktion - Achten Sie auf das Ausblenden von Seiten */
  onHide: Funktion () {
 
  },
 
  /**
   * Lebenszyklusfunktion - Deinstallation der Seite überwachen*/
  beimEntladen: Funktion () {
 
  },
 
  /**
   * Seitenbezogene Ereignisverarbeitungsfunktion - Achten Sie auf die Pulldown-Aktion des Benutzers */
  onPullDownRefresh: Funktion () {
 
  },
 
  /**
   * Die Funktion, die das Bottoming-Ereignis auf der Seite behandelt*/
  onReachBottom: Funktion () {
 
  },
 
  /**
   * Der Benutzer klickt auf die obere rechte Ecke, um zu teilen*/
  beiShareAppMessage: Funktion () {
 
  }
})

/* Seiten/ceshiPages/index.wxss */
.pages_box{
  Rand oben: 20rpx;
  Anzeige: Flex;
  Anzeige: -webkit-flex;
  Flex-Richtung: Reihe;
  Inhalt ausrichten: Abstand herum;
  Inhalt ausrichten: Flex-Start;
  Flex-Wrap: Nowrap;
}
.pages_box>ansicht{
  Zeilenhöhe: 60rpx;
  Schriftgröße: 30rpx;
  Rand: 1px durchgezogen #A0A0A0;
  Hintergrundfarbe: #F7F7F7;
  Anzeige: Inline-Block;
  Polsterung: 0 25rpx;
  Rand links: 12rpx;
  Farbe: #64646C;
  Rahmenradius: 10rpx;
}
.pages_box>ansicht.aktiv{
  Hintergrundfarbe: #FCD821;
  Rahmenfarbe: #F39800;
}
.pages_box>Ansicht:letztes-Kind,.pages_box>Ansicht:erstes-Kind{
  Randradius: 60rpx;
  Polsterung: 0 30rpx;
}