この記事の例では、ページング効果表示を実現するためのミニプログラムの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 <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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux にバイナリ MySQL をインストールして MySQL パスワードをクラックする方法
>>: データベースを削除して逃げる?xtraback を使用して MySQL データベースをバックアップする方法
一般的に、アーカイブされたファイルや圧縮されたファイルの内容を表示するには、まず解凍してから表示する...
基本概念デフォルトでは、Compose はアプリケーション用のネットワークを作成し、サービスの各コン...
私は現在、自分自身の小さなプログラム プロジェクトに取り組んでいます。プロフェッショナルなフロントエ...
目次1. Node Exporterをインストールする2. cAdvisorをインストールする3. ...
1. まずmysqlサービスを停止します管理者としてCMDを開いて閉じるか、Windowsサービスペ...
Linux システムを使用したことがある友人なら、 catコマンドを使用したことがあるはずです。もち...
シンプルなSpring Boot Webプロジェクトを作成するアイデア ツールを使用して、Sprin...
この記事では、以下の環境をテストします。 CentOS 7 64 ビット 最小 MySQL 5.7 ...
MongoDB を起動すると、プロンプトは次のようになります。共有ライブラリのロード中にエラーが発...
1. インストールプロセスMySQL バージョン: 5.7.18 1. my.ini ファイル(簡易...
効果使用する場合は、コードとスタイルを自分で最適化してください。画像を表示しない/ビデオとオーディオ...
赤い封筒の揺れ効果を実現するには要件があります。これまでやったことがないので、記録しておきます。ヘヘ...
この記事の例では、クールなフロントエンドページのスライド検証の具体的なコードを参考までに共有していま...
サーバーの負荷を軽減するために、ユーザーが入力するときにフロントエンドページで簡単な検証を実行する必...
仮想環境で pip 経由でインストールしてみてください: pip で mysqlclient をイン...