ページング効果を実装するミニプログラム

<view class="pages_box">
  <view bindtap="pagesFn" class="{{pagesNum==0?'active':''}}" data-type="0">前のページ</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>
  </ブロック>
  <view bindtap="pagesFn" class="{{pagesNum==-1?'active':''}}" data-type="-1">次のページ</view>
</ビュー>

// ページ/ceshiPages/index.js
ページ（{
 
  /**
   * ページの初期データ */
  データ： {
    ページ数:1,
    maxPages:15, //ページ総数 tyindex:1
  },
 
  /**
   * ライフサイクル機能 - ページの読み込みをリッスンする*/
  onLoad: 関数 (オプション) {
 
  },
    ページFn:function(e){
    type = e.currentTarget.dataset.type とします。
    _that = this とします。
    if(typeof type == "string"){//次のページif(type == "previous_page"){//前のページif(_that.data.pagesNum-1 >0){
          _that.setData({
            ページ数:_that.data.pagesNum-1、
            tyindex:_that.data.pagesNum-1,
          })
        }
        コンソールログ(_that.data.pagesNum)
      }else{//次のページif(_that.data.pagesNum+1 <= _that.data.maxPages){
          if((_that.data.pagesNum+1)%3 == 0){
            _that.setData({
              tyindex:_that.data.pagesNum+1,
            })
          }
          _that.setData({
            ページ数:_that.data.pagesNum+1,
          })
          コンソールログ(_that.data.pagesNum)
        }
      }
    }それ以外{
      コンソールログ(_that.data.pagesNum)
      if(type>_that.data.pagesNum){
        if(type <= _that.data.maxPages){
          _that.setData({
            tyindex:タイプ、
            ページ数:タイプ、
          })
        }
      }
      if(type<_that.data.pagesNum){
        if(type >=1){
          _that.setData({
            tyindex:タイプ、
            ページ数:タイプ、
          })
        }
      }
      コンソールログ(_that.data.pagesNum)
    }
  },
  /**
   * ライフサイクル関数 - ページの初期レンダリングの完了を待機します*/
  onReady: 関数 () {
 
  },
 
  /**
   * ライフサイクル機能 - モニターページ表示 */
  onShow: 関数() {
 
  },
 
  /**
   * ライフサイクル機能 - ページの非表示を監視する*/
  onHide: 関数 () {
 
  },
 
  /**
   * ライフサイクル機能 - ページのアンインストールを監視する*/
  onUnload: 関数 () {
 
  },
 
  /**
   * ページ関連のイベント処理関数 - ユーザーのプルダウンアクションをリッスンする */
  onPullDownRefresh: 関数 () {
 
  },
 
  /**
   * ページ上のボトムイベントを処理する関数*/
  onReachBottom: 関数 () {
 
  },
 
  /**
   * ユーザーは右上隅をクリックして共有します*/
  onShareAppMessage: 関数 () {
 
  }
})

/* ページ/ceshiPages/index.wxss */
.ページボックス{
  上マージン: 20rpx;
  ディスプレイ: フレックス;
  ディスプレイ: -webkit-flex;
  flex-direction: 行;
  コンテンツの両端揃え: スペースを空ける;
  align-content: flex-start;
  flex-wrap: nowrap;
}
.pages_box>ビュー{
  行の高さ: 60rpx;
  フォントサイズ: 30rpx;
  境界線: 1px 実線 #A0A0A0;
  背景色: #F7F7F7;
  表示: インラインブロック;
  パディング: 0 25rpx;
  左マージン: 12rpx;
  色: #64646C;
  境界線の半径: 10rpx;
}
.pages_box>view.active{
  背景色: #FCD821;
  境界線の色: #F39800;
}
.pages_box>ビュー:最後の子、.pages_box>ビュー:最初の子{
  境界線の半径: 60rpx;
  パディング: 0 30rpx;
}