uniapp 仿微信的右边下拉选择弹出框的实现代码

uniapp 仿微信的右边下拉选择弹出框的实现代码仿微信的右边下拉选择弹出框的实现代码

主要介绍了uniapp 仿微信的右边下拉选择弹出框的实现代码，文中通过示例代码介绍的非常详细，对大家的学

习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

在百度找了很多 没有找到满意的 这里根据自己的需求 抽取一个组件

这个组件主要是包括搜索框和右边菜单点击弹出一个下拉筛选菜单

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

<template>

//这里是搜索框的输入框 不需要的可以删掉

//这里是输入框旁边的图标（这里的图标是一张图片）

<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="../itemNoQuery/itemNoQuery"><li>货号查询</li></navigator>

<view class="liBottomBorder"></view>

<navigator url="../priceReductionQuery/priceReductionQuery"><li>降价查询</li></navigator>

</ul>

</nav>

</view>

</view>

</view>

</template>

<script>

},

methods: {

// 点击页面事件 隐藏需要隐藏的区域

HiddenClick () {

this.ShowHidden = false

},

},

mounted () {

// document.addEventListener('click', this.HiddenClick)

},