Mini program development to create pop-up menu function (with code)-Mini Program Development-php.cn

This time I will bring you the pop-up menu function of mini program development (with code). What are the precautions for mini program development of pop-up menu function? The following is a practical case, let’s take a look.

Requirements

Click the tab bar button to pop up the menu, click again to retract the menu

Problems to be solved

Tab bar three-column style, the tab bar is fixed;
Click the tab bar to pop up the menu, and a transparent mask appears;
The mask priority is under the pop-up box;
Setting the label in the pop-up box;
Hide the scroll bar of the scroll bar

How to solve it?

Flexible layout, horizontal, the three equally divide the entire column;
State monitoring click event, data control hide or show, through rgba Set transparency
Set z-index for the pop-up box;
Elastic layout flex wrap after horizontal arrangement exceeds then space-around control spacing

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

Copy after login

Specific implementation

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>

Copy after login

wxss

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

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

Copy after login

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

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!