【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】小程序中如何實(shí)現(xiàn)彈出菜單功能

【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】小程序中如何實(shí)現(xiàn)彈出菜單功能

這篇文章給大家分享的是有關(guān)小程序中如何實(shí)現(xiàn)彈出菜單功能的內(nèi)容。在下覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨在下過(guò)來(lái)看看吧。需求點(diǎn)擊標(biāo)簽欄按鈕，向下彈出菜單，再次點(diǎn)擊，收回菜單要解決的問(wèn)題標(biāo)簽欄三欄樣式，標(biāo)簽欄固定不動(dòng)；點(diǎn)擊標(biāo)簽欄彈出菜單，并且出現(xiàn)透明遮罩；遮罩優(yōu)先級(jí)在彈出框之下；彈出框內(nèi)標(biāo)簽的設(shè)置；滾動(dòng)欄滾動(dòng)條的隱藏如何解決？彈性布局，橫向，三者平分整欄;狀態(tài)監(jiān)聽(tīng)點(diǎn)擊事件，數(shù)據(jù)控制hide或者show,通過(guò)rgba設(shè)置透明度彈出框設(shè)置z-index；彈性布局flex橫向排列超出后wrap然后space-around控制間距::-webkit-scrollbar

{

width:

0;

height:

0;

color:

transparent;

}具體實(shí)現(xiàn)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">確認(rèn)</button>

</view>

</scroll-view>

</block>

<block

wx:if="{{isActive==true&&status=='3'}}">

<view

class="orderContainer">

<view

class="block">智能排序</view>

<view

class="block">時(shí)間排序</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:

['全國(guó)',

'杭州',

'北京',

'深圳',

'上海',

'廣州',

'武漢',

'重慶']

},

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