最近はコース設計を実現するために、フロントエンドも少しやっています。今日はいくつかの機能を実現するための連携メニューを作りたいと思います。終わりました。メモを取らせてください。 ステップ1:知る 簡単に言えば、左側と右側のサイドメニューは領域を 2 つの部分に分割します。コンポーネントに関しては、WeChat 開発ドキュメントに直接アクセスできると思います。コードを通じて理解できるはずだと私は思います。これ以上話さずに、すぐにコードを見てみましょう。 (まず、私はまだフロントエンドの仕事を始めたばかりの新人です。文章が下手なところもあるかもしれません。ブロガーの皆さんに改善点の提案をしていただき、お互いに学び合いたいと思っています。) ステップ2:まず効果を確認する 実行効率は依然として非常に高速で、遅延はありません。 ステップ3:実装(コード) ここではその一部だけを記載しましたが、問題なく直接実装できます。必要に応じて変更してください。 wxml <!-- 左スクロールバー--> <ビュークラス = 'total'> <view class='under_line'></view> <view style='float: left' class='left'> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY' style='height: {{winHeight}}px'> <view class='すべてクリア'> <block wx:key="リスト" wx:for="{{リスト}}"> <view bindtap='jumpIndex' data-menuindex='{{index}}'> <view class='テキストスタイル'> <text class="{{indexId==index?'active1':''}}">{{item}}</text> <text class="{{indexId==index?'active':''}}"></text> </ビュー> </ビュー> </ブロック> </ビュー> </スクロールビュー> </ビュー> <!--右列--> <view class="right"> <!--indexId 値を判断して異なるページを表示します--> <view wx:if="{{indexId==0}}"> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY2' style='height: {{winHeight}}px'> <view class='すべてクリア'> <block wx:key="lists_r0" wx:for="{{lists_r0}}"> <view bindtap='jumpIndexR0' data-menuindex='{{index}}'> <view class='text-style2'> <text class="{{indexIdr0==index?'active2':''}}">{{item}}</text> <text class="{{indexIdr0==index?'active3':''}}"></text> </ビュー> </ビュー> </ブロック> </ビュー> </スクロールビュー> </ビュー> <view wx:if="{{indexId==1}}"> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY2' style='height: {{winHeight}}px'> <view class='すべてクリア'> <ブロック wx:key="lists_r1" wx:for="{{lists_r1}}"> <view bindtap='jumpIndexR0' data-menuindex='{{index}}'> <view class='text-style2'> <text class="{{indexIdr0==index?'active2':''}}">{{item}}</text> <text class="{{indexIdr0==index?'active3':''}}"></text> </ビュー> </ビュー> </ブロック> </ビュー> </スクロールビュー> </ビュー> </ビュー> </ビュー> wxss .アンダーライン{ 幅: 100%; 上境界線: 1rpx 実線 #efefef; } 。左 { 上境界線: 1rpx 実線 #efefef; 右境界線: 1rpx 実線 #efefef; } .テキストスタイル{ 幅: 200rpx; 高さ: 140rpx; 行の高さ: 140rpx; テキスト配置: 中央; フォントサイズ: 34rpx; フォントファミリー: PingFangSC-Semibold; 色: rgba(51, 51, 51, 1); } .アクティブ3 { 表示: ブロック; 幅: 500rpx; 高さ: 6rpx; 背景: rgb(88, 123, 193); 位置: 相対的; 左: 0rpx; 下部: 30rpx; } .アクティブ2 { 色: rgb(88, 123, 193); } .アクティブ1 { 色: #96C158; } 。アクティブ { 表示: ブロック; 幅: 50rpx; 高さ: 6rpx; 背景: #96C158; 位置: 相対的; 左: 75rpx; 下部: 30rpx; } .スクロールY{ 幅: 210rpx; 位置: 固定; 左: 0; 上: 0; 右境界線: 1rpx 実線 #efefef; } 。右{ 上境界線: 1rpx 実線 #efefef; 左境界線: 1rpx実線rgba(0,0,0,0.0); 左マージン: 2rpx; } .スクロールY2 { 幅: 520rpx; 位置: 固定; 右: 0; 上: 0; 左境界線: 1rpx実線rgba(0,0,0,0); 左マージン: 2rpx; } .text-style2 { 幅: 520rpx; 高さ: 140rpx; 行の高さ: 140rpx; テキスト配置: 左; フォントサイズ: 34rpx; フォントファミリー: PingFangSC-Semibold; 色: rgba(51, 51, 51, 1); } .ボタン呼び出し{ 高さ: 90rpx; 幅: 90rpx; 位置: 固定; 下部: 150rpx; 右: 13rpx; 不透明度: 0.7; zインデックス: 100; } js ページ({ /** * ページの初期データ */ データ: { リスト: [ 「主要分類1」、「主要分類2」、「主要分類3」、「学生課」、「党委員会課」、「学務課」、「退職課」、「警備課」、「財務監査課」、「実験室・設備課」、「人事課」、「警備課」、「大学」、「直属部署」、「その他」 ]、 リスト_r0: [ 「メインクラス 1 のサブクラス 1」、 「主分類1のサブカテゴリ2」、「主分類1のサブカテゴリ3」、「主分類1のサブカテゴリ4」、「党委員会部門」、「学校職員と教務」、「退職事務室」、「警備室」、「財務と監査」、「実験室と設備」、「人事室」、「警備室」、「大学」、「直属部門」、「その他」 ]、 リスト_r1: [ 「メインクラス2のサブクラス1」、 「主類2の2類」、「主類2の3類」、「主類2の4類」、「党委員会部」、「学校職員と教務」、「退職事務室」、「警備室」、「財務と監査」、「実験室と設備」、「人事室」、「警備室」、「大学」、「直属部署」、「その他」 ]、 インデックスID: 0, インデックスIdr0: 0, インデックスIdr0: 1, }, //左クリックイベント jumpIndex(e) { インデックス = e.currentTarget.dataset.menuindex それを = これとする that.setData({ インデックスID: インデックス }); }, ジャンプインデックスR0(e) { インデックス = e.currentTarget.dataset.menuindex それを = これとする that.setData({ indexIdr0: インデックス }); }, /** * ライフサイクル機能 - ページの読み込みをリッスンする*/ onLoad: 関数(オプション) { var that = これ wx.getSystemInfo({ 成功: function(res) { that.setData({ ウィンドウの高さ: res.windowHeight }); } }); }, /** * ライフサイクル関数 - ページの初期レンダリングの完了を待機します*/ onReady: 関数() { }, /** * ライフサイクル機能 - モニターページ表示 */ onShow: 関数() { }, /** * ライフサイクル機能 - ページの非表示を監視する*/ onHide: 関数() { }, /** * ライフサイクル機能 - ページのアンインストールを監視する*/ onUnload: 関数() { }, /** * ページ関連のイベント処理関数 - ユーザーのプルダウンアクションをリッスンする */ onPullDownRefresh: 関数() { }, /** * ページ上のボトムイベントを処理する関数*/ onReachBottom: 関数() { }, /** * ユーザーは右上隅をクリックして共有します*/ onShareAppMessage: 関数() { } }) json { "コンポーネントの使用": { }, "navigationBarBackgroundColor":"希望する背景色", "navigationBarTitleText": "電話によるお問い合わせ", "ナビゲーションバーのテキストスタイル":"黒", "プルダウンリフレッシュを有効にする": true } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: FileZilla 425 FTP に接続できない (Alibaba クラウド サーバー) の解決策
この記事では、セカンダリメニュー効果を実現するためのJavaScriptの具体的なコードを参考までに...
クイックスタート1. Docker Hubでnginxイメージを見つけるdocker 検索 ngin...
1. まず公式ウェブサイトにアクセスしてMySQLインストールパッケージをダウンロードします参考: ...
もちろん、CSS はフレームワークを必要とするほど高度ではないと考えて、反対の意見を持つ人もたくさん...
MySQL で使用される自動インクリメント ID には多くの種類があり、各自動インクリメント ID ...
この記事では、Element-uiを使用してvue.jsでナビゲーションメニューを実装するための具体...
Linux システムには 2 種類のスケジュールされたタスクがあります。1 つは 1 回だけ実行され...
Linux 操作実験環境: Centos7 仮想マシンまず、共通ユーザーgubeiqingを作成しま...
1. はじめにまず、1 台のマシンで複数のインスタンスを使用する理由という質問に答える必要があります...
Windows Server 2016 アクティベーション キーを皆さんと共有したいと思います。wi...
1. データを初期化する `test_01` が存在する場合はテーブルを削除します。 テーブル「te...
CentOS 6 以前のバージョンでは、MySQL サーバー/クライアント インストール パッケージ...
序文エージェントの役割は何ですか? - 複数のドメイン名が同じサーバーに解決される- 1つのサーバー...
目次1. データベースの使用を選択2. 情報を表示する3. テーブルを作成する4. データを挿入する...
概要連合接続データセットキーワードは、2つのクエリ結果セットを1つに連結し、同一のレコードを除外する...