怎么在微信小程序中实现弹出菜单功能

本篇文章为大家展示了怎么在微信小程序中实现弹出菜单功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联公司是一家网站设计公司，集创意、互联网应用、软件技术为一体的创意网站建设服务商，主营产品：成都响应式网站建设公司、品牌网站设计、营销型网站。我们专注企业品牌在网站中的整体树立，网络互动的体验，以及在手机等移动端的优质呈现。网站设计制作、成都网站建设、移动互联产品、网络运营、VI设计、云产品.运维为核心业务。为用户提供一站式解决方案，我们深知市场的竞争激烈，认真对待每位客户，为客户提供赏析悦目的作品，网站的价值服务。

wxml

  
    
      城市筛选
      
    
    
      职位筛选
      
    
    
      排序方式
      
    
  
  
    
      
        {{item}}
      
    
  
  
    
      
        {{item.title}}
        
          
            {{type}}
          
        
      
      
        确认
      
    
  
  
    
      智能排序
      时间排序
      薪资排序
    
  
  
    
      
    
  
  
    
    搜索
  

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

上述内容就是怎么在微信小程序中实现弹出菜单功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。