WeChatアプレットが連携メニューを実現

WeChatアプレットが連携メニューを実現

最近はコース設計を実現するために、フロントエンドも少しやっています。今日はいくつかの機能を実現するための連携メニューを作りたいと思います。終わりました。メモを取らせてください。

ステップ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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットがメニューの左右連動を実現

<<:  Linuxコマンド履歴の調整方法の詳細な説明

>>:  FileZilla 425 FTP に接続できない (Alibaba クラウド サーバー) の解決策

推薦する

HTML 画像 img タグ_Powernode Java アカデミー

まとめプロジェクトの説明形式<img src="..."> H2+ ...

jsでシンプルなパズルゲームを実現する

この記事では、簡単なパズルゲームを実装するためのjsの具体的なコードを参考までに共有します。具体的な...

jsはシンプルな計算機を実装します

参考までに、ネイティブjsを使用して簡単な計算機(詳細なコメント付き)を実装します。具体的な内容は次...

セマフォによるTomcatの異常終了の解決方法

最近はビッグデータで遊んでいます。友人が私のところに来て、オンラインの Tomcat が不可解に終了...

JavaScript 中断要求に対するいくつかの解決策の詳細な説明

目次1 約束呼び出しチェーンを中断する約束を破る中止メソッドのラッピング - Axios の Can...

Linuxサーバーのディスク容量を拡張する方法

目次序文ステップ序文今日、es ログが記録されていないことに気付きました。filebeat、elas...

Linux での MySQL 5.6.27 インストール チュートリアル

この記事では、LinuxでのMySQL 5.6.27のインストールチュートリアルを参考までに紹介しま...

JS 非同期スタック トレース: await が Promise よりも優れている理由

概要async/await と Promise の基本的な違いは、await fn() は現在の関数...

ボタンをクリックしてテキストを入力ボックスに変換し、保存をクリックしてテキスト実装コードに変換します。

ボタンをクリックしてテキストを入力ボックスに変換し、保存をクリックしてテキスト実装コードに変換します...

Vueのフロントエンドシステムとフロントエンドとバックエンドの分離の詳細な説明

目次概要フロントエンド知識システムフロントエンドの3つの要素プレゼンテーション層 (CSS)動作レイ...

HTML 内の CSS および JS リンクのバージョン番号 (キャッシュを更新)

背景検索エンジンで「.htaccess キャッシュ」というキーワードを検索すると、ウェブサイトのファ...

IE6 スペースバグ修正方法

コードを見てみましょう:コードをコピーコードは次のとおりです。 < !DOCTYPE html...

Vueはシンプルなマーキー効果を実装します

この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容...

4つの柔軟なScssコンパイル出力スタイル

多くの人は、Scss を使用する瞬間からコンパイル方法を説明されてきました。したがって、コマンドのコ...

TomcatはLog4jを使用してcatalina.outログを出力します。

Tomcat のデフォルトのログは java.util.logging を使用しますが、これにはい...