効果画像: 1. はじめに独自のアプレットでこのような機能を実装する必要がある 1. 核となる考え方 スワイパーとスクロールビューは、currentTab navScrollLeft の 2 つの変数を共有します。ナビゲーションをクリックするか、スワイパーをスライドすると、2 つの変数の値が現在のインデックスに設定されます。 2. 実装タブナビゲーションバーは<scroll-view>タグを使用し、コンテンツは<swiper>を使用します。 1.wxml実装 <ビュークラス="コンテナ"> <!-- タブ ナビゲーション バー --> <!-- scroll-left 属性はスクロール バーの位置を制御できます --> <!-- scroll-with-animation スクロールはアニメーション遷移を追加します --> <!-- スクロールx="true" navScrollLeft: 初期値 0 navData: タブテキスト 配列の現在の要素の変数名を指定するには、wx:for-item を使用します。 配列の現在のインデックスの変数名を指定するには、wx:for-index を使用します。 --> <!--タブ --> <スクロールビュー scroll-x="true" class="nav" scroll-left="{{navScrollLeft}}" scroll-with-animation="{{true}}"> <block wx:for="{{navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx"> <!-- 選択されているかどうかを判断し、選択されている場合はスタイルを設定します--> <!-- スイッチナビゲーション --> <view class="nav-item {{currentTab == idx ?'active':''}}" data-current="{{idx}}" bindtap="switchNav"> {{navItem.text}} 表示> </ブロック> </スクロールビュー> <!-- ページコンテンツ --> <!--duration="300": スライドアニメーションの持続時間 --> <!-- スイッチタブ --> <スワイパー class="tab-box" current="{{currentTab}}" 期間="300" bindchange="switchTab"> <スワイパーアイテム wx:for="{{[0,1,2,3,4,5,6]}}" wx:for-item="タブアイテム" wx:for-index="idx" wx:key="idx" クラス="タブコンテンツ"> {{タブアイテム}} </スワイパーアイテム> </スワイパー> </ビュー> 2.js実装 //index.js //アプリケーションインスタンスを取得する const app = getApp() ページ({ データ: { ナビデータ:[ { テキスト: 「ニュース」 }, { テキスト: 「告白」 }, { テキスト: 「テイクアウト」 }, { テキスト: 「家庭教師になる」 }, { テキスト: 「家庭教師を探す」 }, { テキスト: 「家を借りる」 }, { テキスト: 「自動車学校」 } ]、 現在のタブ: 0, navScrollLeft: 0 }, //イベント処理関数 onLoad: function () { }, switchNav(イベント){ // 現在のタブのIDを取得します var cur = event.currentTarget.dataset.current; //各タブオプションは幅の1/5を占めます var singleNavWidth = this.data.windowWidth / 5; //タブオプションを中央に配置する this.setData({ navScrollLeft: (現在 - 2) * シングルナビゲーション幅 }) // IDがクリックされたタブIDと一致しているかどうかを確認します if (this.data.currentTab == cur) { false を返します。 } それ以外 { this.setData({ 現在のタブ: cur }) } }, switchTab(イベント){ var cur = イベントの詳細.current; var singleNavWidth = this.data.windowWidth / 5; this.setData({ 現在のタブ: cur, navScrollLeft: (現在 - 2) * シングルナビゲーション幅 }); } }) 3.wxss実装 /**index.wxss**/ ページ { 幅: 100%; 高さ: 100%; } 。容器 { 幅: 100%; 高さ: 100%; } .nav { /* タブナビゲーションの幅と高さを設定する*/ 高さ: 80rpx; 幅: 100%; /* 2つの枠線付きボックスを並べて配置する必要がある場合、 これは、box-sizing を "border-box" に設定することで実行できます。 */ ボックスのサイズ: 境界線ボックス; オーバーフロー: 非表示; /* 中心 */ 行の高さ: 80rpx; 背景: #f7f7f7; フォントサイズ: 16px; /* 段落内のテキストが折り返されないことを指定します: */ 空白: ラップなし; 位置: 固定; 上: 0; 左: 0; zインデックス: 99; } .nav-item { 幅: 20%; 表示: インラインブロック; テキスト配置: 中央; } .nav-item.active { 色: 緑; } .タブボックス{ 背景: rgb(31, 201, 96); /* これをナビゲーションの高さに設定します*/ パディングトップ: 80rpx; 高さ: 100%; ボックスのサイズ: 境界線ボックス; } .タブコンテンツ{ /* div 要素内のコンテンツの左端/右端を切り取ります - 要素のコンテンツ領域からオーバーフローする場合: */ overflow-y: スクロール; } 3. 参考文献と要約この記事は https://www.jb51.net/article/169290.htm を参照しています。 解決プロセス 4. 最適化0. レンダリング 1. 各タブの長さは適応的です 2. 前のタブをクリックすると 現在 1 にいるときに 3 をクリックすると、パスは 1-2-3 になります。実機テストの後、エクスペリエンスに影響を与えることなく 3 に直接ジャンプします。 // ****************************** ナビゲーション バーを選択すると、ナビゲーション バーの ID と位置が取得されます ******************************************** タブ選択(e) { console.log("結果:", e); //ニュースデータベースを操作する var cur = e.currentTarget.dataset.id; //タブオプションを中央に配置する this.setData({ // 各タブのID TabCur: e.currentTarget.dataset.id、 //適応スクロール左: (e.currentTarget.dataset.id) * 60, }) // IDがクリックされたタブIDと一致しているかどうかを確認します if (this.data.currentTab == cur) { false を返します。 } それ以外 { this.setData({ 現在のタブ: cur }) } console.log(e.currentTarget.dataset.id); コンソールにログ出力します。 console.log("水平スクロールバーの位置", this.data.scrollLeft); }, スイッチタブ(e) { コンソールログ(e); var cur = e.detail.current; this.setData({ TabCur: cur、 スクロール左: cur * 60, }); } これで、WeChatミニプログラムタブスライド切り替え機能の実装コードに関するこの記事は終了です。より関連性の高いミニプログラムタブスライド切り替えコンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMを応援してください。 以下もご興味があるかもしれません:
|
<<: mysql init_connect に関するいくつかの重要なポイントの要約
>>: あなたが知らない Linux KDE アプリケーション 11 選
HTML にビデオを挿入するために最もよく使用される方法は 2 つあります。1 つは古い <o...
参照ドキュメント公式 Docker インストール ドキュメント: https://docs.dock...
目次環境まとめモジュール機能関連文書ソースコード分析CCGame.js CCInputManager...
この記事では、オンラインチャットを実現するためのVue + sshフレームワークの具体的なコードを参...
イメージを作成する方法は 3 つあります。既存のイメージに基づいてコンテナを作成する、ローカル テン...
Magento を頻繁に変更する場合、element.style に遭遇することがあります。 これは...
目次まずページレイアウトを構築する必要がありますJS関数1 JS関数2 JS関数3 JS関数4効果図...
目次1. 手順2. 修飾語3. .sync 修飾子4. まとめ1. 手順指示とは命令です。文字通りの...
目次プロトタイプを理解するプロトタイプオブジェクトを理解するインスタンスプロパティとプロトタイププロ...
Web デザインを学習する過程で、html と htm の関係など、遭遇した多くの問題について深く...
最近、MySQL 5.6 を導入しましたが、デフォルトでは MySQL はローカル サービスのみを許...
この記事では、例を使用して MySQL データのバックアップと復元の方法について説明します。ご参考ま...
序文SQL モードは、MySQL がサポートする SQL 構文と、実行されるデータ検証チェックに影響...
目次導入従来のトランジションアニメーションCSS トランジションアニメーションjsアニメーション従来...
MySQL-8.0.23 をダウンロードクリックしてダウンロード: mysql-8.0.23-li...