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

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

この記事の例では、ページング効果表示を実現するためのミニプログラムの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

<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>
</ビュー>

js:

// ページ/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: 関数 () {
 
  }
})

CS: ...

/* ページ/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;
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットがページング読み込み効果を実現
  • WeChatアプレットの検索ページング機能の実装コード
  • ミニプログラムのページング練習: 再利用可能なページングコンポーネントの作成
  • WeChatアプレットクラウド開発によりデータの追加、クエリ、ページングを実現
  • WeChat アプレットのページング読み込みのサンプルコード
  • WeChat アプレットがモバイル スライド ページング効果を実現 (ajax)
  • 実際のWeChatミニプログラムにおけるプルアップ(ページ読み込み)効果(2)
  • WeChat アプレット テンプレート ページング スライド バー

<<:  Linux にバイナリ MySQL をインストールして MySQL パスワードをクラックする方法

>>:  データベースを削除して逃げる?xtraback を使用して MySQL データベースをバックアップする方法

推薦する

Linux で圧縮ファイルの内容を表示する 10 の方法 (要約)

一般的に、アーカイブされたファイルや圧縮されたファイルの内容を表示するには、まず解凍してから表示する...

Docker Compose ネットワーク設定の説明

基本概念デフォルトでは、Compose はアプリケーション用のネットワークを作成し、サービスの各コン...

WeChatアプレットのスクロールビューが左右にスライドできない問題を解決する方法

私は現在、自分自身の小さなプログラム プロジェクトに取り組んでいます。プロフェッショナルなフロントエ...

DockerでPrometheusをインストールする詳細なチュートリアル

目次1. Node Exporterをインストールする2. cAdvisorをインストールする3. ...

Windows 10 システムで Mysql8.0.13 のルート パスワードを忘れる方法

1. まずmysqlサービスを停止します管理者としてCMDを開いて閉じるか、Windowsサービスペ...

Linux 上のカラフルな猫

Linux システムを使用したことがある友人なら、 catコマンドを使用したことがあるはずです。もち...

DockerでJavaプログラムを起動する方法

シンプルなSpring Boot Webプロジェクトを作成するアイデア ツールを使用して、Sprin...

CentOS 7 で MySQL 5.7 をインストールして設定する

この記事では、以下の環境をテストします。 CentOS 7 64 ビット 最小 MySQL 5.7 ...

MongoDB の起動エラーを解決します: 共有ライブラリのロード中にエラーが発生しました: libstdc++.so.6: 共有オブジェクト ファイルを開けません:

MongoDB を起動すると、プロンプトは次のようになります。共有ライブラリのロード中にエラーが発...

Windows に MySQL 5.7.18 の解凍バージョンをインストールするチュートリアル

1. インストールプロセスMySQL バージョン: 5.7.18 1. my.ini ファイル(簡易...

Vue は、デスクトップから Web ページにファイルをドラッグするためのサンプル コードを実装します (画像/オーディオ/ビデオを表示できます)

効果使用する場合は、コードとスタイルを自分で最適化してください。画像を表示しない/ビデオとオーディオ...

CSS3は赤い封筒を振る効果を実現します

赤い封筒の揺れ効果を実現するには要件があります。これまでやったことがないので、記録しておきます。ヘヘ...

フロントエンドページのスライド検証を実装するための JavaScript + HTML (2)

この記事の例では、クールなフロントエンドページのスライド検証の具体的なコードを参考までに共有していま...

JavaScript はパスワードボックスの入力検証を実装します

サーバーの負荷を軽減するために、ユーザーが入力するときにフロントエンドページで簡単な検証を実行する必...

Mac インストール mysqlclient プロセス分析

仮想環境で pip 経由でインストールしてみてください: pip で mysqlclient をイン...