WeChat アプレットはポップアップ メニュー機能を実装します

最近、これを必要とするプロジェクトに取り組んでいます。ユーザーがタブバーボタンをクリックすると、メニューが下にポップアップし、もう一度クリックするとメニューが閉じます。次に、この記事を通じて、WeChat アプレットのポップアップ メニュー機能を紹介します。興味のある友達は一緒に見てください

要件

タブ バー ボタンをクリックして、ポップアップ メニューを開きます。メニューを下方向に移動するには、もう一度クリックしてメニューを閉じます

解決すべき問題

タブバーの3列スタイル、タブバーは固定されています
タブバーをクリックするとポップアップします。メニューを開くと、透明なマスクが表示されます。
ポップアップ ボックス内のラベルの設定が優先されます。

4. どうやって解決しますか？

5. 
   

柔軟なレイアウト、水平、3 つの均等に分割された列;

状態監視クリックイベント、データ制御の非表示または表示、rgba による透明度の設定

Z インデックスを設定するためのポップアップ ボックス。

1. 水平配置を超えた後に伸縮性のあるレイアウトをフレックスラップし、スペースアラウンドで間隔を制御します
具体的な実装
4. wxml

rrリー

wxss

::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}

js

<import src="../../templates/template" />
<view class="container {{isMask?&#39;mask&#39;:&#39;&#39;}}">
  <view class="header">
    <view class="filterCity {{status==&#39;1&#39; && isActive?&#39;active&#39;:&#39;&#39;}}" data-status=&#39;1&#39; bindtap="changeStatus">
      <view class="city">城市筛选</view>
      <image src="{{status==&#39;1&#39; && isActive?&#39;../../youzan-image/red-up.png&#39;:&#39;../../youzan-image/down.png&#39;}}" />
    </view>
    <view class="filterJob {{status==&#39;2&#39; && isActive?&#39;active&#39;:&#39;&#39;}}" data-status=&#39;2&#39; bindtap="changeStatus">
      <view class="job">职位筛选</view>
      <image src="{{status==&#39;2&#39; && isActive?&#39;../../youzan-image/red-up.png&#39;:&#39;../../youzan-image/down.png&#39;}}" />
    </view>
    <view class="filterOrder {{status==&#39;3&#39;&& isActive?&#39;active&#39;:&#39;&#39;}}" data-status=&#39;3&#39; bindtap="changeStatus">
      <view class="order">排序方式</view>
      <image src="{{status==&#39;3&#39; && isActive?&#39;../../youzan-image/red-up.png&#39;:&#39;../../youzan-image/down.png&#39;}}" />
    </view>
  </view>
  <block wx:if="{{isActive==true&&status==&#39;1&#39;}}">
    <view class="cityContainer">
      <block wx:for="{{city}}" wx:key="id" wx:for-index="index">
        <view class="city {{isSelect&&index==curIndex?&#39;select&#39;:&#39;&#39;}}" data-index="{{index}}" bindtap="select">{{item}}</view>
      </block>
    </view>
  </block>
  <block wx:if="{{isActive==true&&status==&#39;2&#39;}}">
    <scroll-view scroll-y="true" class="posContainer">
      <block wx:for="{{cur}}" data-index=&#39;index&#39; wx:for-index=&#39;index&#39; wx:key="index">
        <view class="title">{{item.title}}</view>
        <view class="poscontent">
          <view wx:for="{{item.types}}" wx:for-item="type" wx:key=&#39;id&#39; wx:for-index="{{index}}" data-index="{{index}}">
            <view class="tag {{isSelect&&index==curIndex?&#39;select&#39;:&#39;&#39;}}" data-id="{{id}}" bindtap="multiSelect">{{type}}</view>
          </view>
        </view>
      </block>
      <view class="confirm">
        <button class="weui-btn" type="warn">确认</button>
      </view>
    </scroll-view>
  </block>
  <block wx:if="{{isActive==true&&status==&#39;3&#39;}}">
    <view class="orderContainer">
      <view class="block">智能排序</view>
      <view class="block">时间排序</view>
      <view class="block">薪资排序</view>
    </view>
  </block>
  <view class="listContainer" >
    <view wx:for="{{jobList}}" wx:key="index" data-index="{{index}}">
      <template is="list-item" data="{{...item}}" />
    </view>
  </view>
  <view class="search " bindtap="search">
    <image src="../../youzan-image/search.png" />
    <text>搜索</text>
  </view>
</view>

その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

WeChat ミニ プログラム チャート プラグイン (wx-charts) の紹介

WeChat ミニ プログラム フォーム検証エラー プロンプト効果

以上がWeChat アプレットはポップアップ メニュー機能を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。