欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp 仿微信的右邊下拉選擇彈出框的實現(xiàn)代碼

 更新時間:2020年07月12日 09:46:49   作者:冉茉莉  
這篇文章主要介紹了uniapp 仿微信的右邊下拉選擇彈出框的實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

在百度找了很多 沒有找到滿意的 這里根據(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)典面試題)

    JS中的this、apply、call、bind是一道經(jīng)典面試題,最好還是了解一下 this 的指向和 call、apply、bind 三者的區(qū)別。下面就跟隨腳本之家小編一起學(xué)習(xí)this、apply、call、bind的知識吧
    2017-09-09
  • javascript解析xml字符串的函數(shù)

    javascript解析xml字符串的函數(shù)

    在使用操作XML文件時,我們可以使用Load方法直接加載xml文件即可,在ie和ff下通用。
    2008-06-06
  • three.js實現(xiàn)圓柱體

    three.js實現(xiàn)圓柱體

    這篇文章主要為大家詳細(xì)介紹了three.js實現(xiàn)圓柱體的相關(guān)代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-12-12
  • Javascript this指針

    Javascript this指針

    Javascript是一門基于對象的動態(tài)語言,也就是說,所有東西都是對象,一個很典型的例子就是函數(shù)也被視為普通的對象。
    2009-07-07
  • 淺析JS中回調(diào)函數(shù)的使用

    淺析JS中回調(diào)函數(shù)的使用

    在JavaScript中,回調(diào)函數(shù)是一種常見的編程模式,用于處理異步操作和事件處理,這篇文章主要為大家介紹了回調(diào)函數(shù)的使用場景和注意事項,需要的可以參考下
    2023-08-08
  • NW.js 簡介與使用方法

    NW.js 簡介與使用方法

    NW.js (原名 node-webkit)是一個基于 Chromium 和 node.js 的應(yīng)用運行時,通過它可以用 HTML 和 JavaScript 編寫原生應(yīng)用程序.這篇文章主要介紹了NW.js 簡介與使用,需要的朋友可以參考下
    2018-02-02
  • JavaScript中檢查對象property的存在性方法介紹

    JavaScript中檢查對象property的存在性方法介紹

    這篇文章主要介紹了JavaScript中檢查對象property的存在性方法介紹,本文講解了4種方法來檢查某個對象o是否擁有property x,需要的朋友可以參考下
    2014-12-12
  • Selenium執(zhí)行Javascript腳本參數(shù)及返回值過程詳解

    Selenium執(zhí)行Javascript腳本參數(shù)及返回值過程詳解

    這篇文章主要介紹了Selenium執(zhí)行Javascript腳本參數(shù)及返回值過程詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-04-04
  • Javascript動畫的實現(xiàn)原理淺析

    Javascript動畫的實現(xiàn)原理淺析

    這篇文章主要介紹了Javascript動畫的實現(xiàn)原理淺析,本文用兩個實例來解釋Javascript動畫的實現(xiàn)原理,需要的朋友可以參考下
    2015-03-03
  • 詳解uniapp頁面跳轉(zhuǎn)URL傳參大坑

    詳解uniapp頁面跳轉(zhuǎn)URL傳參大坑

    本文主要介紹了詳解uniapp頁面跳轉(zhuǎn)URL傳參大坑,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03

最新評論