uniappはWeChatの右側のプルダウンをまねてポップアップボックスの実現コードを選択します。

百度でたくさん探しましたが、満足のいくところが見つけられませんでした。ここで自分の需要によってコンポーネントを抽出します。
このコンポーネントは主に検索ボックスと右メニューを含んでいます。クリックして一つのプルダウンフィルタメニューを開きます。

ここではまず一つの別々のページでこのコンポーネントを保存します。

<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がWeChatを真似する右側のプルダウンについては、ポップアップ枠の実現コードを選択する文章を紹介します。これに関連して、uniappのプルダウンについては、ポップアップ枠の内容を選択します。以前の文章を検索したり、下記の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。