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

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

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

<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 データベースをバックアップする方法

推薦する

Mysqlはブール型の演算を設定します

Mysqlはブール型を設定します1. Tinyintタイプテストテーブルを作成し、blフィールドをブ...

Jira リバース プロキシを実装するための nginx について

概要: nginx リバース プロキシ jira を構成し、https を実装します。Tomcat ...

Vueのイベント処理とイベント修飾子の詳細な説明

<div id="ルート"> <h2>頑張れ、{{na...

MySQL フェイルオーバー ノート: アプリケーション対応設計の詳細な説明

1. はじめに周知のように、データベース ミドルウェアの読み取り/書き込み分離のアプリケーション シ...

Vue で lodop 印刷コントロールを使用してブラウザ互換の印刷を実現する方法

序文このコントロールを直接印刷すると下部に透かしが入りますが、公式 Web サイトから購入することで...

Docker で Elasticsearch Kibana と ik Word Segender をデプロイする詳細な説明

esインストール docker pull elasticsearch:7.4.0 # -d : バッ...

Vue/React シングルページ アプリケーションをリフレッシュなしで復元するソリューション

目次導入なぜわざわざ?落とし穴のあるコミュニティソリューション(Vue を例に挙げる)現時点では良い...

Linux で JDK をインストールして環境変数を設定する方法 (この記事で十分です)

目次1. Linuxのビット数を確認する2. JDKをダウンロードする3. JDKをインストールする...

JavaScript スコープチェーンの基本原理のグラフィカルな説明

目次序文範囲1. スコープとは何ですか? 2. [[スコープ]] プロパティ3. スコープチェーン4...

Linux カーネルの探究: Kconfig の秘密

Linux 構成/ビルド システムがどのように機能するかを深く理解します。 Linux カーネル構成...

回転灯効果を実現するWeChatアプレットの例

序文日常の開発では、テキストの水平スクロール効果(一般にカルーセルと呼ばれる)によく遭遇します。これ...

ネイティブ js で呼び出し、適用、バインドを実装する方法

1. 呼び出しを実装するステップ:関数をオブジェクトのプロパティとして設定します。これを関数に割り当...

MySQL 文字列連結関数 GROUP_CONCAT の詳細な説明

前回の記事では、クロステーブル更新について書きました。自分が書いた SQL を見たとき、自分がバカみ...

docker-machineの使い方の詳しい説明

Docker-machineはDockerが公式に提供しているDocker管理ツールです。これは d...

Centos 用の rpm パッケージのカスタマイズと yum リポジトリの構築に関するチュートリアル

1 yumでソフトウェアをインストールしたときにダウンロードしたrpmパッケージを保存しますyum ...