uniapp 仿微信的右边下拉选择弹出框的实现代码
更新时间:2020年7月12日 16:49 点击:2597
在百度找了很多 没有找到满意的 这里根据自己的需求 抽取一个组件
这个组件主要是包括搜索框和右边菜单点击弹出一个下拉筛选菜单
这里首先用一个单独的页面存放这个组件
<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>
到此这篇关于uniapp 仿微信的右边下拉选择弹出框的实现代码的文章就介绍到这了,更多相关uniapp 下拉选择弹出框内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要介绍了uniapp微信小程序:key失效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-20
- 本文主要介绍了手把手教你uniapp和小程序分包,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-02
- 这篇文章主要为大家详细介绍了uniapp 实现可以左右滑动导航栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-10-21
- 这篇文章主要介绍了微信小程序自定义底部弹出框动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-16
Framework7 设置是否允许点击弹出框外部区域,关闭弹出层
下面我们来看一篇关于 Framework7 设置是否允许点击弹出框外部区域,关闭弹出层的使用例子,具体的细节步骤如下文介绍。 1,Framework7中三大类弹出框 (1)模态框(moda...2016-10-02- 这篇文章主要介绍了uniapp和vue的区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-10-19
解决element DateTimePicker+vue弹出框只显示小时
这篇文章主要介绍了解决element DateTimePicker+vue弹出框只显示小时,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-16- 这篇文章主要介绍了uniapp 仿微信的右边下拉选择弹出框的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-12
- 这篇文章主要介绍了解决vue动态下拉菜单 有数据未反应的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-06
- 我们知道,DropDownList下拉框是一个服务器控件,有时候,有些朋友为了方便绑定DropDownList下拉框的选项,但又想在DropDownList实现客户端的下拉事件,那该怎么实现呢?...2021-09-22
- 这篇文章主要介绍了十分钟轻松掌握dataframe数据选择,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-04
- 这篇文章主要为大家详细介绍了uniapp微信小程序实现一个页面多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-02
- 这篇文章主要介绍了C#选择排序法,实例分析了C#排序算法的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要为大家详细介绍了uni-app实现获取验证码倒计时功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-02
Android双向选择控件DoubleSeekBar使用详解
这篇文章主要为大家详细介绍了Android双向选择控件DoubleSeekBar的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-27- 下面的两个文件copy到同一个文件下,通过web路径访问index.html看看吧,这个是通过iframe来实现的连动更新,list.php目前的内容比较简单,你看通过list.php来进行数据库查询,...2016-11-25
- 这篇文章主要为大家详细介绍了jquery自定义右键菜单、全选、不连续选择的相关资料,需要的朋友可以参考下...2016-03-03
- 这篇文章主要介绍了uniapp电商小程序实现订单30分钟倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-02
- 这篇文章主要为大家详细介绍了Vue实现下拉加载更多,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-09