預覽效果圖：↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

========================================================

首先要新建一個元件

1.在想要的位置上新建一個目錄 2.在該目錄中 右鍵 → 新建一個Component 工具會自動生成四個檔案（無視assets,那是我放圖片的地方） 其中我們一般修改 .js .wxml .wxss 檔案

3.觀察select.json檔案 “component”: true 這句話表示這個目錄是作為一個元件的，可以給別的目錄用

========================================================

開始編碼

selector.wxml

<view class='selectBox'> 
  <view class='select' catchtap='selectTap'> 
    <text class='select_text'>{{selectData[index]}}</text> 
    <image class='select_img {{selectShow&&"select_img_rotate"}}' 
           src='../selector/assets/jiantou.jpg' 
           background-size
 
="contain">
    </image> 
  </view> 

  <view class='optionBox'
  		style='height:300rpx;'>     
  	<text class='option' 
          wx:for='{{selectData}}' 
          wx:key='this' 
          data-index='{{index}}' 
          catchtap='optionTap'>{{item}}
    </text> 
  </
 
view> 
</view>

======================================================== selector.wxss（要改的樣式可以自己改）

.selectBox{ height:1.5rem;border:2px solid black;border-radius: 20rpx; position: relative; padding-left: 10rpx} 
.selectBox .select{ box-sizing: border-box; width: 100%; height: 100%; border-radius: 8rpx; display: flex; align-items: center; padding: 0 10rpx; } 
.selectBox .select .select_text{ font-size: 35rpx; color:black; line-height: 28rpx; flex: 1; } 
.selectBox .select .select_img{ width: 30rpx; height: 30rpx; display: block; transition:transform 0.3s; }
 .selectBox .select .select_img_rotate{ transform:rotate(180deg); } 
.selectBox .optionBox{ position: absolute; top: calc(100%); width: 100%; box-sizing: border-box; height: 0; overflow-y: auto; background: #fff; transition: height 0.3s; border-left:2px solid black; border-right:2px solid black;border:1px solid black ;z-index:9999} 
.selectBox .optionBox .option{ display: block; line-height: 50rpx; font-size: 35rpx; border-top: 2px solid black; padding: 10rpx;z-index:9999;} 

======================================================= selector.js

Component({
  /**
   * 元件的屬性列表
   */
  properties: {
    selectData: { //下拉列表的資料
      type: Array,
      value: [] //初始資料,可通過屬性修改
    },
  },

  /**
   * 元件的初始資料
   */
  data: {
    selectShow: false,//控制下拉列表的顯示隱藏，false隱藏、true顯示
    index: 0,//選擇的下拉列表下標
  },

  /**
   * 元件的方法列表
   */
  methods: {
    selectTap() {
      this.setData({
        selectShow: !this.data.selectShow
      });
    },
    optionTap(e){
      let Index=e.currentTarget.dataset.index;
      this.setData({
        index:Index,
        selectShow:!this.data.selectShow
      });
    }
  }
})

========================================================

定義完了元件,開始使用

1.首先在要使用的地方的.json檔案中宣告用到了該元件

{
  "usingComponents": {
    "selector":"/pages/selector/selector"
  }
}

2.直接使用元件標籤(selectData定義為屬性,可以自定義可選的列表)

     <selector selectData="{{position}}"></selector>

OK，大功告成！ 附上我的箭頭圖片 ↓↓↓↓