小程序下拉菜单--带遮罩层

wxml

<view class="content-container">   
<view class="pick-header" bindtap="onPickHeaderClick">全部机构z-index:60 view> 
  <view     class="pick-container {{needAnimation?(openPicker?'slidown':'slidup'):''}}">  
         
  <block wx:for="{{orgList}}" wx:for-item="item">    
  <view data-id="{{index}}" bindtap='clickPick'>    
   
  <text style="{{index == itemId?'color:#1ecc8b':''}}">{{item.Name}} text>    view>    
  block>  
  view>   
  <view class="shadow" hidden="{{!openPicker}}">view>   
  <view class="content" style="height:{{contentHeight}}px">     
  	<view>我是内容content view z-index:20view>    
  	<view>我是内容content view z-index:20view>    
  	<view>我是内容content view z-index:20view>    
  	<view>我是内容content view z-index:20view>    
  	<view>我是内容content view z-index:20view>    
  	<view>我是内容content view z-index:20view>    
  	<view>我是内容content view z-index:20view>    
  	<view>我是内容content view z-index:20view>    
  	<view>我是内容content view z-index:20view>    
  	<view>我是内容content view z-index:20view>    
  	<view>我是内容content view z-index:20view>  
  view> 
  view> 

.wxss

/* 带遮罩层的下拉菜单 *//*根布局-点击项*/ 
.content-container {   
	width: 100%;   
	height: 100%;  
	position: absolute; 
} 
/*筛选头部*/ 
.pick-header {   
	width: 100%;   
	padding: 28rpx 20rpx;  
	z-index: 60;   
	position: fixed;   
	font-size: 28rpx;  
	color: #666;  
	background-color: #eee; 
} 
/*筛选项容器布局*/ 
.pick-container {   
	width: 100%;   b
	ackground-color: #fff;   
	position: absolute;   
	z-index: 50;   
	top: -540rpx; 
} 
.pick-container text { 
 	display: block;  
	line-height: 88rpx;  
 	border-bottom: 1px solid #eee;
 }
 /*筛选项隐藏 显示动画 start*/ 
 @keyframes slidown {   
 	from {     transform: translateY(0%);   }   
 	to {     transform: translateY(100%);   } 
 } 
 .slidown {   
 	display: block;   
 	animation: slidown 0.1s ease-in both; 
 } 
 @keyframes slidup {   
 	from { transform: translateY(100%); }   
 	to { transform: translateY(0%); } 
} 
.slidup {  
	display: block;   
	animation: slidup 0.2s ease-in both; 
} 
/*筛选项隐藏 显示动画 end*/ /*筛选项显示出来的时候的阴影*/ 
.shadow {   
	width: 100%;   
	height: 100%;  
	background-color: rgba(0, 0, 0, 0.3);   
	z-index: 40;   
	top: 72rpx; 
} 
/*内容容器布局*/ 
.content {   
	width: 100%;   
	position: absolute;   
	top: 90rpx;   
	z-index: 20; 
} 

.js

data: {    
// 带有遮罩层的下拉菜单    
openPicker: false,    
needAnimation: false,    
contentHeight: 1000,    
itemId: 0,      // 默认选中第一个   
orgList: [      
	{ Name: '下拉列表项----11111' },      
	{ Name: '下拉列表项----22222' },      
	{ Name: '下拉列表项----33333' },      
	{ Name: '下拉列表项----44444' },      
	{ Name: '下拉列表项----55555' },      
	{ Name: '下拉列表项----66666' },      
	{ Name: '下拉列表项----777777' },       
  ],  
},
  // 带有遮罩层的下拉菜单  
onPickHeaderClick: function () {     
	this.setData({       
		openPicker: !this.data.openPicker,       
		needAnimation: true     
	});    
},
  /**   
  * 点击选中下拉列表项   
  * */  
clickPick(e) {    
	var self = this;    
	var ids = e.currentTarget.dataset.id;  //获取自定义的id       
	this.setData({      
		itemId: ids,  //把获取的自定义id赋给当前列的id(即获取当前列下标) 
		openPicker: !this.data.openPicker,    
	})  
},

同样感谢看完的小伙伴，希望对你有用：
由于公司前端就我一个，遇到问题久久不能解决，上周的心情可以算是比较复杂了。好在终于过去了，最终还是请教了之前相熟的朋友，有些感慨、自己能力还是不行，继续学习、继续前行，加油。