uniapp 仿微信的右邊下拉選擇彈出框的實現(xiàn)代碼
在百度找了很多 沒有找到滿意的 這里根據(jù)自己的需求 抽取一個組件
這個組件主要是包括搜索框和右邊菜單點擊彈出一個下拉篩選菜單
這里首先用一個單獨的頁面存放這個組件
<template> //這里是搜索框的輸入框 不需要的可以刪掉 <view> <view class="arrivalSearch"> <view class="arrivalSmallsearch"> <view class="arrivalSearchInput"> <input type="text" :placeholder="dateinit"> </view> //這里是輸入框旁邊的圖標(biāo)(這里的圖標(biāo)是一張圖片) <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: { // 點擊頁面事件 隱藏需要隱藏的區(qū)域 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); /*順時針旋轉(zhuǎn)90°*/ } } </style>
然后在main.js中引入頁面
import springBox from 'pages/springBox/springBox' Vue.component('springBox',springBox)
最后直接在需要使用的頁面使用組件就可以了
<springBox></springBox>
到此這篇關(guān)于uniapp 仿微信的右邊下拉選擇彈出框的實現(xiàn)代碼的文章就介紹到這了,更多相關(guān)uniapp 下拉選擇彈出框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解JS中的this、apply、call、bind(經(jīng)典面試題)
JS中的this、apply、call、bind是一道經(jīng)典面試題,最好還是了解一下 this 的指向和 call、apply、bind 三者的區(qū)別。下面就跟隨腳本之家小編一起學(xué)習(xí)this、apply、call、bind的知識吧2017-09-09JavaScript中檢查對象property的存在性方法介紹
這篇文章主要介紹了JavaScript中檢查對象property的存在性方法介紹,本文講解了4種方法來檢查某個對象o是否擁有property x,需要的朋友可以參考下2014-12-12Selenium執(zhí)行Javascript腳本參數(shù)及返回值過程詳解
這篇文章主要介紹了Selenium執(zhí)行Javascript腳本參數(shù)及返回值過程詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-04-04