这篇文章主要介绍了uniapp 仿微信的右边下拉选择弹出框的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在百度找了很多 没有找到满意的 这里根据自己的需求 抽取一个组件
这个组件主要是包括搜索框和右边菜单点击弹出一个下拉筛选菜单
这里首先用一个单独的页面存放这个组件
//这里是搜索框的输入框 不需要的可以删掉 //这里是输入框旁边的图标（这里的图标是一张图片） //这里是弹出来的下拉筛选框 .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°*/ } }
然后在main.js中引入页面
import springBox from 'pages/springBox/springBox' Vue.component('springBox',springBox)
最后直接在需要使用的页面使用组件就可以了
到此这篇关于uniapp 仿微信的右边下拉选择弹出框的实现代码的文章就介绍到这了,更多相关uniapp 下拉选择弹出框内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
以上就是uniapp 仿微信的右边下拉选择弹出框的实现代码的详细内容，更多请关注本站其它相关文章！
