最近はコース設計を実現するために、フロントエンドも少しやっています。今日はいくつかの機能を実現するための連携メニューを作りたいと思います。終わりました。メモを取らせてください。 ステップ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 クラウド サーバー) の解決策
まとめプロジェクトの説明形式<img src="..."> H2+ ...
この記事では、簡単なパズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な...
参考までに、ネイティブjsを使用して簡単な計算機(詳細なコメント付き)を実装します。具体的な内容は次...
最近はビッグデータで遊んでいます。友人が私のところに来て、オンラインの Tomcat が不可解に終了...
目次1 約束呼び出しチェーンを中断する約束を破る中止メソッドのラッピング - Axios の Can...
目次序文ステップ序文今日、es ログが記録されていないことに気付きました。filebeat、elas...
この記事では、LinuxでのMySQL 5.6.27のインストールチュートリアルを参考までに紹介しま...
概要async/await と Promise の基本的な違いは、await fn() は現在の関数...
ボタンをクリックしてテキストを入力ボックスに変換し、保存をクリックしてテキスト実装コードに変換します...
目次概要フロントエンド知識システムフロントエンドの3つの要素プレゼンテーション層 (CSS)動作レイ...
背景検索エンジンで「.htaccess キャッシュ」というキーワードを検索すると、ウェブサイトのファ...
コードを見てみましょう:コードをコピーコードは次のとおりです。 < !DOCTYPE html...
この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容...
多くの人は、Scss を使用する瞬間からコンパイル方法を説明されてきました。したがって、コマンドのコ...
Tomcat のデフォルトのログは java.util.logging を使用しますが、これにはい...