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 クラウド サーバー) の解決策

推薦する

JavaScript を使用してセカンダリ メニューを作成する

この記事では、セカンダリメニュー効果を実現するためのJavaScriptの具体的なコードを参考までに...

Docker Nginxコンテナの制作と展開の実装方法

クイックスタート1. Docker Hubでnginxイメージを見つけるdocker 検索 ngin...

win10にmysql 8.0.18-winx64をインストールする詳細な手順

1. まず公式ウェブサイトにアクセスしてMySQLインストールパッケージをダウンロードします参考: ...

960 グリッドシステムの基本原理と使用法

もちろん、CSS はフレームワークを必要とするほど高度ではないと考えて、反対の意見を持つ人もたくさん...

MySQL の自動増分 ID (主キー) が不足した場合の解決策

MySQL で使用される自動インクリメント ID には多くの種類があり、各自動インクリメント ID ...

Vue.jsはElement-uiを使用してナビゲーションメニューを実装します

この記事では、Element-uiを使用してvue.jsでナビゲーションメニューを実装するための具体...

Linux で at および cron スケジュールタスクをカスタマイズする方法

Linux システムには 2 種類のスケジュールされたタスクがあります。1 つは 1 回だけ実行され...

Linux でユーザーを完全に削除する 2 つの方法

Linux 操作実験環境: Centos7 仮想マシンまず、共通ユーザーgubeiqingを作成しま...

単一マシン上での Tomcat の複数インスタンスの実装

1. はじめにまず、1 台のマシンで複数のインスタンスを使用する理由という質問に答える必要があります...

Windows Server 2016 標準キー アクティベーション キー シリアル番号

Windows Server 2016 アクティベーション キーを皆さんと共有したいと思います。wi...

MySQLの比較演算子正規表現マッチングREGEXPの使用の詳細な説明

1. データを初期化する `test_01` が存在する場合はテーブルを削除します。 テーブル「te...

CentOS7にMariaDB 10.2.4をインストールする方法の詳細な説明

CentOS 6 以前のバージョンでは、MySQL サーバー/クライアント インストール パッケージ...

Docker で複数のアプリケーション サイトをプロキシするために Nginx を使用する方法

序文エージェントの役割は何ですか? - 複数のドメイン名が同じサーバーに解決される- 1つのサーバー...

MySQL ステートメントの概要

目次1. データベースの使用を選択2. 情報を表示する3. テーブルを作成する4. データを挿入する...

MySQL が UNION を使用して 2 つのクエリを接続できない理由の詳細な説明

概要連合接続データセットキーワードは、2つのクエリ結果セットを1つに連結し、同一のレコードを除外する...