Entwicklung eines Miniprogramms zum Erstellen einer Popup-Menüfunktion (mit Code)

Dieses Mal werde ich Ihnen vorstellen, wie Sie eine Popup-Menüfunktion in einem kleinen Programm entwickeln (mit Code). Was sind die Vorsichtsmaßnahmen für die Entwicklung einer Popup-Menüfunktion in einem kleinen Programm? Werfen wir einen Blick darauf.

Anforderungen

Klicken Sie auf die Schaltfläche in der Tableiste, um das Menü aufzurufen. Klicken Sie erneut, um das Menü zu verkleinern.

Zu lösende Probleme

1. Tab-Leiste im dreispaltigen Stil, der Die Tab-Leiste ist fixiert;

2. Klicken Sie auf die Tab-Leiste, um das Menü aufzurufen, und eine transparente Maske erscheint

3. Die Maskenpriorität ist unter das Popup-Feld;

4. Beschriftung im Popup-Feld festlegen

5. Bildlaufleiste ausblenden

Wie löst man das Problem? 🎜>

Flexibles Layout, horizontal, die drei teilen die gesamte Spalte gleichmäßig auf;
Statusüberwachung, Klickereignis, Datensteuerung ein- oder ausblenden, über RGBA. Transparenz festlegen
Z-Index für Popup-Box festlegen >

3. Elastische Layout-Flexibilität, Umbruch nach Überschreitung der horizontalen Anordnung, dann Leerzeichen-Kontrollabstand

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

Spezifische Implementierung

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}`,
  })
 }
})

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Bitte achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website für weitere spannende Inhalte! >vue erstellt eine Schaltflächenkomponente

Das obige ist der detaillierte Inhalt vonEntwicklung eines Miniprogramms zum Erstellen einer Popup-Menüfunktion (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!