uniapp 仿微信的右边下拉选择弹出框

最新推荐文章于 2025-06-11 22:57:45 发布

冉茉莉

最新推荐文章于 2025-06-11 22:57:45 发布

阅读量5.1k

点赞数 10

CC 4.0 BY-SA版权

文章标签： uniapp

本文链接：https://blog.csdn.net/ranmoli/article/details/107081260

本文介绍了一款自定义的搜索与筛选组件的实现过程，该组件包含搜索框及右侧菜单，点击后可展开下拉筛选菜单，适用于到货、门店、货号等查询场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在百度找了很多没有找到满意的这里根据自己的需求抽取一个组件
这个组件主要是包括搜索框和右边菜单点击弹出一个下拉筛选菜单
搜索框加左边菜单点击弹出下拉筛选框

这里首先用一个单独的页面存放这个组件

<template>
//这里是搜索框的输入框  不需要的可以删掉
	<view>
		<view class="arrivalSearch">
			 <view class="arrivalSmallsearch">
				 <view class="arrivalSearchInput">
					 <input type="text" :placeholder="dateinit">
				  </view>
				  //这里是输入框旁边的图标（这里的图标是一张图片）
				 <image src="../../static/img/nav.png" mode="aspectFill" @click.stop="ShowHidden = !ShowHidden">  </image>
			 </view>
		</view>
		//这里是弹出来的下拉筛选框
		<view class="arrivalNavigation" v-if="ShowHidden">
		 <view class="d4"></view>
		 <view class="sideNavigation">
		 <nav>
			 <ul>
				 <navigator url="../arrivalQuery/arrivalQuery">
					<li>到货查询</li>
				 </navigator>
				 <view class="liBottomBorder"></view>
				<navigator url="../retailStore/retailStore"><li>门店查询</li></navigator>
				  <view class="liBottomBorder"></view>
				  <navigator url="../itemNoQuery/itemNoQuery"><li>货号查询</li></navigator>
				  <view class="liBottomBorder"></view>
				  <navigator url="../priceReductionQuery/priceReductionQuery"><li>降价查询</li></navigator>
			 </ul>
		 </nav>
		 </view>
		</view>
	</view>
</template>

<script>
		export default {
			data() {
				return {
					 ShowHidden: false,
					 dateinit:'请输入货号',
				};
			},
			methods: {
			   // 点击页面事件 隐藏需要隐藏的区域
			   HiddenClick () {
			     this.ShowHidden = false
			   },
			 },
			mounted () {
			    // document.addEventListener('click', this.HiddenClick)
			  },
		}
</script>

<style lang="less">
 .arrivalSearch{
		 width: 100%;
		 height: 100rpx;
		 background-color: #fff;
		 box-shadow: 0 0 10rpx #eee;
		.arrivalSmallsearch{
			width: 96%;
			display: flex;
			.arrivalSearchInput{
						 height: 70rpx;
						 background-color: #F0F1F6;
						 border-radius: 40rpx;
						 font-size: 25rpx;
						 margin-left: 10rpx;
						 margin-top: 10rpx;
						 width: 608rpx;
			}
			input{
				width: 80%;
			    margin-left: 40rpx;
				margin-top: 10rpx;
			}
			image{
				width: 40rpx;
				height: 40rpx;
				margin-left: 20rpx;
				margin-top: 20rpx;
			}
		}
	
	 }
	 //从这里开始是弹出框的样式  不需要搜索框的 前面样式都不用加
	 .arrivalNavigation{
	 	width: 250rpx;
	 	position: absolute;
	     right:20rpx;
	 	z-index: 99;
	 	.sideNavigation{
	 		  width: 248rpx;
	 		  background-color: #202020;
	 		  color: #eee;
	 		  border-radius: 10rpx;
	 			  li{
	 				 height: 85rpx;
	 				 text-align: center;
	 				 line-height: 85rpx;
	 				 font-size: 25rpx;
	 			  }
	 			  .liBottomBorder{
	 				border: 0.1rpx solid #373737;
	 			  }
	 			
	 		  }
	 		  .d4{
	 			// position: absolute;
	 		 //  	left: 140rpx;
	 		  	width: 0; 
	 		  	height: 0;
	 			margin-left: 150rpx;
	 			margin-top: -20rpx;
	 		  	border-width:20rpx;
	 		  	border-style: solid;
	 		  	border-color: transparent #333 transparent transparent;
	 		  	transform: rotate(90deg); /*顺时针旋转90°*/
	 			
	 		  }
	 	}
</style>

然后在main.js中引入页面

import springBox from 'pages/springBox/springBox'
Vue.component('springBox',springBox)

最后直接在需要使用的页面使用组件就可以了

 <springBox></springBox>

完成！！！