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
Tab-Leiste im dreispaltigen Stil, der Die Tab-Leiste ist fixiert;
Klicken Sie auf die Tab-Leiste, um das Menü aufzurufen, und eine transparente Maske erscheint
Die Maskenpriorität ist unter das Popup-Feld;
Beschriftung im Popup-Feld festlegen
Bildlaufleiste ausblenden
Wie löst man das Problem? 🎜>
Elastische Layout-Flexibilität, Umbruch nach Überschreitung der horizontalen Anordnung, dann Leerzeichen-Kontrollabstand
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
} wxmlwxss<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>Nach dem Login kopieren
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!
