L'applet WeChat implémente la fonction de menu contextuel

Travailler récemment sur des projets nécessite une telle exigence. Lorsque l'utilisateur clique sur le bouton de la barre d'onglets, le menu apparaîtra vers le bas. Cliquez à nouveau pour rétracter le menu. Ensuite, à travers cet article, je vais vous présenter la fonction de menu contextuel de l'applet WeChat. Les amis intéressés devraient y jeter un œil

Exigences<.>

Cliquez sur le bouton de la barre d'onglets pour faire apparaître le menu, cliquez à nouveau pour rétracter le menu

Problèmes à résoudre

1. Barre d'onglets de style à trois colonnes, la barre d'onglets est fixe

2. Cliquez sur la barre d'onglets ; pour faire apparaître le menu, et un masque transparent apparaît

3. La priorité du masque est sous la boîte contextuelle

4. Le paramètre de ; l'étiquette dans la boîte contextuelle

5. Comment résoudre le problème du masquage de la barre de défilement

   
   

?

1. Mise en page flexible, horizontale, trois colonnes également divisées

2. Événement de clic de surveillance de l'état, contrôle des données ; masquer ou afficher, définir la transparence via rgba

3. Coffret pop-up z-index

4. Mise en page flexible, enroulement, puis espace après ; la disposition horizontale dépasse -autour de l'espacement des contrôles

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

Mise en œuvre spécifique

wxml

<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>

wxss

page {
  position: relative;
  width: 100%;
  height: 100vh;
}

.header {
  width: 100%;
  height: 80rpx;
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: center;
  color: #313131;
  font-size: 16px;
  border-bottom: 1rpx solid #eeeeee;
  z-index: 9999;
  background-color: #fff;
}

.filterCity {
  flex: 1;
  position: relative;
  height: 80rpx;
  line-height: 80rpx;
}

.filterJob {
  position: relative;
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
}

.filterOrder {
  position: relative;
  flex: 1;
  height: 80rpx;
  line-height: 80rpx;
}

.header image {
  position: absolute;
  right: 15rpx;
  top: 26rpx;
  width: 30rpx;
  height: 30rpx;
}

.active {
  color: #ef0001;
}

.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 80rpx;
  background-color: rgba(15, 15, 26, 0.3);
}

.cityContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: space-between;
  flex-wrap: wrap;
  width: 100%;
  height: 300rpx;
  z-index: 999;
  background-color: #fff;
  border-bottom: 1rpx solid #e9e9e9;
  padding-bottom: 130rpx;
}

.cityContainer .city {
  display: block;
  font-size: 15px;
  margin-top: 100rpx;
  width: 150rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  border: 1rpx solid #e9e9e9;
  overflow: hidden;
}
.select {
  color: #ffffff;
  background-color: #ed0000;
}
.posContainer {
  height: 980rpx;
  width: 100%;
  background-color: #fff;
  /* overflow:auto; */
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
.title {
  margin-top: 55rpx;
  font-size: 15px;
  margin-left: 28rpx;
}
.poscontent {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: -15rpx;
}
.tag {
  margin-left: 28rpx;
  margin-top: 23rpx;
  font-size: 13px;
  width: 150rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  border: 1rpx solid #e9e9e9;
}
.confirm {
  width: 100%;
  height: 150rpx;
  border: 1rpx solid transparent;
  background-color: #fff;
}
.weui-btn {
  position: fixed;
  width: 95%;
  bottom: 52rpx;
  left: 50%;
  transform: translateX(-50%);
}
.orderContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  width: 100%;
  height: 125rpx;
}
.block {
  font-size: 13px;
  width: 200rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  border: 1rpx solid #e9e9e9;
}
.search {
  position: fixed;
  bottom: 80rpx;
  background-color: #fff;
  right: 25rpx;
  width: 150rpx;
  height: 75rpx;
  line-height: 75rpx;
  text-align: center;
  border-radius: 35rpx;
  box-shadow: 1rpx 1rpx 7rpx 7rpx #f5f5f5;
}
.search image {
  width: 30rpx;
  height: 30rpx;
}
.search text {
  font-size: 15px;
  padding-left: 9rpx;
  color: #666666;
}
.listContainer {
  width: 100%;
  height: 100%;
  margin-top: 80rpx;
}

js

import category from '../../api/employ'
import jobList from '../../api/detail'
Page({
 data: {
  curIndex: '',
  isActive: false,
  jobList:[],
  cur: [],
  job: [],
  isShow: true,
  status: 0,
  isMask: false,
  isSelect: false,
  city: ['全国', '杭州', '北京', '深圳', '上海', '广州', '武汉', '重庆']
 },
 changeStatus(e) {
  let status = e.currentTarget.dataset.status;
  let cur = category;
  this.setData({
   isActive: !this.data.isActive,
   status: status,
   isMask: !this.data.isMask,
   cur: cur,
  })
 },
 select(e) {
  let curIndex = e.currentTarget.dataset.index;
  this.setData({
   isSelect: " curIndex == this.data.curIndex ? '!this.data.isActive' : 'true' ",
   isActive: false,
   isMask:false,
   curIndex: curIndex,
  })
 },
 multiSelect(e){
  let multiIndex=e.currentTarget.dataset.index;
  this.setData({
   isSelect:!this.data.isSelect,
   curIndex:multiIndex
  })
 },
 search(e) {
  wx.navigateTo({
   url: '../search/search',
  })
 },
 onLoad: function (e) {
  this.setData({
   jobList:jobList
  })
 },
 click:function (e) {
  let id =e.currentTarget.dataset.id;
  wx.navigateTo({
   url: `../detail/detail?id=${id}`,
  })
 }
})

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez. faites attention au site Web PHP chinois !

Recommandations associées :

Introduction au plug-in de graphique du mini programme WeChat (wx-charts)

WeChat mini vérification du formulaire de programme Effet d'invite d'erreur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!