집 >위챗 애플릿 >미니 프로그램 개발 >팝업 메뉴 기능을 생성하는 미니 프로그램 개발(코드 포함)
이번에는 작은 프로그램에서 팝업 메뉴 기능을 개발하는 방법(코드 포함)을 가져오겠습니다. 작은 프로그램에서 팝업 메뉴 기능을 개발할 때 주의 사항은 무엇입니까?
요구 사항
탭 막대 버튼을 클릭하면 메뉴가 나타나고, 다시 클릭하면 메뉴가 닫힙니다.
해결해야 할 문제
탭 막대 3 -열 스타일, 탭 막대가 고정됩니다.
탭 막대를 클릭하여 메뉴를 팝업하면 투명한 마스크가 나타납니다.
마스크 우선 순위는 팝업 상자 아래에 있습니다. 팝업 상자의 라벨 설정
스크롤 막대 숨기기
유연한 레이아웃, 수평, 3개의 균등 분할 열; 상태 모니터링 클릭 이벤트, 데이터 제어 숨기기 또는 표시, rgba를 통해 투명도 설정
팝업 상자 Z-색인 설정
가로 배열이 공백 제어 간격을 초과한 후 유연한 레이아웃 플렉스 랩
::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
<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>
wxsspage {
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;
}
jsimport 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}`,
})
}
})
믿고 살펴보세요. 이 기사의 사례를 읽은 후 방법을 익혔습니다. 기타 관련 기사는 PHP 중국어 웹사이트에 있습니다!
추천 자료:
데이터 케이스 변환을 위한 각도 필터vue 버튼 구성 요소 만들기
위 내용은 팝업 메뉴 기능을 생성하는 미니 프로그램 개발(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!