Heim > Artikel > WeChat-Applet > Das WeChat-Applet implementiert die Popup-Menüfunktion
Für die aktuelle Arbeit an Projekten ist eine solche Anforderung erforderlich. Wenn der Benutzer auf die Schaltfläche in der Registerkartenleiste klickt, wird das Menü nach unten angezeigt. Klicken Sie erneut, um das Menü zu verkleinern. Als nächstes stelle ich Ihnen in diesem Artikel die Popup-Menüfunktion des WeChat-Applets vor. Interessierte Freunde sollten einen Blick auf
Anforderungen
Zu lösende Probleme
Flexibles Layout, horizontal, die drei teilen die gesamte Spalte gleichmäßig auf
::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
wxml
<import src="../../templates/template" /> <view class="container {{isMask?'mask':''}}"> <view class="header"> <view class="filterCity {{status=='1' && isActive?'active':''}}" data-status='1' bindtap="changeStatus"> <view class="city">城市筛选</view> <image src="{{status=='1' && isActive?'../../youzan-image/red-up.png':'../../youzan-image/down.png'}}" /> </view> <view class="filterJob {{status=='2' && isActive?'active':''}}" data-status='2' bindtap="changeStatus"> <view class="job">职位筛选</view> <image src="{{status=='2' && isActive?'../../youzan-image/red-up.png':'../../youzan-image/down.png'}}" /> </view> <view class="filterOrder {{status=='3'&& isActive?'active':''}}" data-status='3' bindtap="changeStatus"> <view class="order">排序方式</view> <image src="{{status=='3' && isActive?'../../youzan-image/red-up.png':'../../youzan-image/down.png'}}" /> </view> </view> <block wx:if="{{isActive==true&&status=='1'}}"> <view class="cityContainer"> <block wx:for="{{city}}" wx:key="id" wx:for-index="index"> <view class="city {{isSelect&&index==curIndex?'select':''}}" data-index="{{index}}" bindtap="select">{{item}}</view> </block> </view> </block> <block wx:if="{{isActive==true&&status=='2'}}"> <scroll-view scroll-y="true" class="posContainer"> <block wx:for="{{cur}}" data-index='index' wx:for-index='index' wx:key="index"> <view class="title">{{item.title}}</view> <view class="poscontent"> <view wx:for="{{item.types}}" wx:for-item="type" wx:key='id' wx:for-index="{{index}}" data-index="{{index}}"> <view class="tag {{isSelect&&index==curIndex?'select':''}}" 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=='3'}}"> <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}`, }) } })Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website. Verwandte Empfehlungen:
Einführung in das WeChat-Miniprogramm-Diagramm-Plug-in (wx-charts)
WeChat-Miniprogramm Formularüberprüfung Fehler prompte Wirkung
Das obige ist der detaillierte Inhalt vonDas WeChat-Applet implementiert die Popup-Menüfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!