由于微信开发者工具没有自带的下拉框组件，在进行开发时发现微信开发者工具所带的自定义组件功能对没有全面且熟悉掌握开发工具的新手或学生来说可能有些复杂且费时，并且没有在免费平台上发现有关制作下拉组件的通透简易教程，因此本人对input、image、radio、radio-group等组件进行了组合，通过添加函数方法实现下拉——选中——返回选中值的功能。效果展示和代码如下：

效果图展示

• 第一次加载页面时，出现操作的提示文字：

• 首次点击下拉图标时，将选项框展开：

• 点击选项时，将选项返回输入框：

• 再次点击下拉图标时，收起选项框：

代码参考

• 在WXML文件里下拉选项框的布局：

<!--用户操作提示-->

  <view class="insert">
    您所处的年龄阶段是：
  </view>

<!--使用input组件和向下箭头组成一个下拉框-->

  <view class="inp-box">

<!--input组件设置为不可操作disable，无需向其内输入数据，用js里定义的optionText作为占位符-->

     <input	class="inp"	disabled="true"	placeholder="{{optionText}}" placeholder-style="font-size:30rpx;color:#808080;"/>

<!--设置文本框左边图标-->

       <view class="inpimg">
          <image src="https://healthy-pleasure-cos-aliyuncs-1258140596.cos.ap-shanghai.myqcloud.com/images/bloodpressure/Age.png" class="pagesimg1" />
       </view>

<!--设置下拉箭头-->
<!--以及selectOption函数来处理选项的选中事件并更新当前选中的文本和索引-->

    <view class="dropdown-box">
       <view class="arrow">

<!--设置下拉箭头图标, 设置showOption函数来控制点击下拉箭头时,下拉框的显示和隐藏-->

          <image src="/bp/image/arrowdown.png" class="selectimg" bindtap="showOption"/>
       </view>

<!--设置选项框,将选项加入,并根据isShowOption的值决定是否显示选项框-->

       <view class="dropdown-option-box" wx:if="{{isShowOption}}">

<!--添加radio选项按钮,用radio-group将多个radio作为一组-->
<!--并且通过bindchange方法设置radioChange函数,对选择行为进行响应设计-->

          <radio-group bindchange="radioChange">

<!--添加label标签，为了方便点击描述文字或按钮时都可选中-->
<!--对选项页面初始数据的items数组进行遍历(通过wx:for方法)，将遍历到的元素输出作为选项-->
<!--并以value属性作为数组元素唯一标识-->

             <label wx:for="{{items}}" wx:key="{{items.value}}">

<!--按遍历的顺序输出value对应的name作为选项的描述文字-->
<!--并将check设置为true,方便radioChange方法进行逻辑处理-->
               <view>
                  <radio value="{{item.value}}" checked="true"/>{{item.name}}
               </view>
               <view style="padding-bottom: 8%;"></view>
             </label>
          </radio-group>
      </view>
    </view>
 </view>

• 在JS（JavaScript）文件里的数据初始化及功能函数的定义         
• 1）页面记载时，与选项有关的数据初始化：

data: {
statusBarHeight:app.globalData.statusBarHeight,

//items数组存放选项

        items: [
          {value: 'kid', name: '6岁以下'},
          {value: 'child', name: '7~12岁'},
          {value: 'teen', name: '13~18岁'},
          {value: 'adult', name: '19~40岁'},
          {value: 'elder', name: '41~60岁'},
          {value: 'old', name: '60岁以上'},
        ],

//选项框中的提示文字，这里在做初始化，即未选择时的提示文字

        optionText: '请选择您的年龄段', 

/**绑定wxml中的组件元素，通过wx:if方法决定是否展示下拉选项框
  *为true则显示，为false则不显示。
  *因为页面刚加载时，不会主动显示选项框，所以设为false
  **/

        isShowOption: false
}

• 2）通过showOption方法设置isShowOption的值：

//该方法绑定在下拉箭头图标上的，每次点击图标，修改一次isShowOption的值

  showOption: function() {
    this.setData({

/**新的值是对原来值取反，因为初始值是false，所以点击一次会展开，再点击就会关闭
  *可以通过反复点击图标来实现下拉框的收起和展开
  **/ 

      isShowOption: !this.data.isShowOption
    });
  }

• 3）通过radioChange监听按钮事件：

//实现将选中按钮的描述文本更新至文本框里

  radioChange(e) {

/**通过console.log方法在日志里查看选中按钮的value值
  *可以通过这个方式查看按钮点击事件是否捕捉成功
  **/

   console.log('radio发生change事件，携带value值为：', e.detail.value)

/**通过switch-case把捕捉到的detail信息里的value值，用来做字符匹配
  *从而更新optionText的值，实现将所选择按钮的描述文本更新至文本框当中
  **/

    switch (e.detail.value) {

        // 更新optionText为找到的对象

        case 'kid':
          this.setData({
            optionText: '6岁以下'
          });
        break;
        case 'child':
          this.setData({
            optionText: '7~12岁'
          });
        break;
        case 'teen':
          this.setData({
            optionText: '13~18岁'
          });
        break;
        case 'adult':
          this.setData({
            optionText: '19~40岁'
          });
        break;
        case 'elder':
          this.setData({
            optionText: '41~60岁'
          });
        break;
        case 'old':
          this.setData({
            optionText:'60岁以上'
          });
        break;
        default:

// 如果没有找到匹配项，可以选择设置一个默认值或进行错误处理
        console.error('未找到匹配的选项');

// 假设这里设置一个默认值为null或undefined，或者你可以根据需求设置其他值

          this.setData({
            optionText: null // 或者其他默认值
          });
        break;
    }
  }

 以上内容属于个人实践结果，虽然相较于自定义组件的复用性不高，但对于入门者来说，较基础易懂，并且有利于加深对原有组件使用的学习。希望本帖对大家有帮助，若有不足的地方，欢迎各位大佬留言指正和经验分享！