网站优化

厦门市小程序流程_uniapp 仿微信的右边下拉选择弹

作者:admin 发布时间:2021-01-05
uniapp 仿微信的右边下拉选择弹出框的实现代码       这篇文章主要介绍了uniapp 仿微信的右边下拉选择弹出框的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

 template 
//这里是搜索框的输入框 不需要的可以删掉
 view 
 view 
 view 
 view 
 input type="text" :placeholder="dateinit" 
 /view 
 //这里是输入框旁边的图标(这里的图标是一张图片)
 image src="../../static/img/nav.png" mode="aspectFill" @click.stop="ShowHidden = !ShowHidden" /image 
 /view 
 /view 
 //这里是弹出来的下拉筛选框
 view v-if="ShowHidden" 
 view /view 
 view 
 nav 
 navigator url="../arrivalQuery/arrivalQuery" 
 li 到货查询 /li 
 /navigator 
 view /view 
 navigator url="../retailStore/retailStore" li 门店查询 /li /navigator 
 view /view 
 navigator url="../itemNoQuery/itemNoQuery" li 货号查询 /li /navigator 
 view /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;
 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'
ponent('springBox',springBox)

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

 springBox /springBox 

到此这篇关于uniapp 仿微信的右边下拉选择弹出框的实现代码的文章就介绍到这了,更多相关uniapp 下拉选择弹出框内容请搜索凡科以前的文章或继续浏览下面的


收缩