この記事の例では、ページング効果表示を実現するためのミニプログラムの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。 <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 データベースをバックアップする方法
Mysqlはブール型を設定します1. Tinyintタイプテストテーブルを作成し、blフィールドをブ...
概要: nginx リバース プロキシ jira を構成し、https を実装します。Tomcat ...
<div id="ルート"> <h2>頑張れ、{{na...
1. はじめに周知のように、データベース ミドルウェアの読み取り/書き込み分離のアプリケーション シ...
序文このコントロールを直接印刷すると下部に透かしが入りますが、公式 Web サイトから購入することで...
esインストール docker pull elasticsearch:7.4.0 # -d : バッ...
目次導入なぜわざわざ?落とし穴のあるコミュニティソリューション(Vue を例に挙げる)現時点では良い...
目次1. Linuxのビット数を確認する2. JDKをダウンロードする3. JDKをインストールする...
目次序文範囲1. スコープとは何ですか? 2. [[スコープ]] プロパティ3. スコープチェーン4...
Linux 構成/ビルド システムがどのように機能するかを深く理解します。 Linux カーネル構成...
序文日常の開発では、テキストの水平スクロール効果(一般にカルーセルと呼ばれる)によく遭遇します。これ...
1. 呼び出しを実装するステップ:関数をオブジェクトのプロパティとして設定します。これを関数に割り当...
前回の記事では、クロステーブル更新について書きました。自分が書いた SQL を見たとき、自分がバカみ...
Docker-machineはDockerが公式に提供しているDocker管理ツールです。これは d...
1 yumでソフトウェアをインストールしたときにダウンロードしたrpmパッケージを保存しますyum ...