​ 前段时间在忙着考试和做项目，导致很久一段时间没更新，今天就浅浅更新一下,因为做项目需要下发很多命令，一开始是写了按钮事件，但是按键太多导致页面不美观简洁，后面想了一下用下拉列表来实现，这样界面就好看多了。

​ 然后发现微信小程序下拉列表只能自己自定义，微信开发者工具没有提供这个组件。网上查看了一下资料，我下面的代码是在另外一个博主的基础上扩展的。

可以直接点这个链接过去看他的博客https://blog.csdn.net/wolf6699/article/details/107915020?可以看到他做的是这样的界面

我在其基础实现这样的界面

​ 这里我着重讲解一下按钮怎么获取下拉列表的下标数组以及相应的指令文字。界面设计我就不讲太多，以免侵权。文章末尾我会放置源码链接，大家可以看源码学习。

​ 接下来我们看index.js里面的代码，首先，我们先记住初始数据里面的几个值，为下面调用做准备。selectData是列表数据，index是列表下标值，这里可以决定下拉列表收起时显示的一个值。

 data: {
    show:false,//控制下拉列表的显示隐藏，false隐藏、true显示
    selectData:['控制指令','开灯','关灯','打开风扇','关闭风扇','打开窗帘','关闭窗帘','打开加湿器','关闭加湿器'],//下拉列表的数据
    index:0,//选择的下拉列表下标
    Index:0
  },

接下来是按钮的事件函数。我在index.js定义的send函数就是它的事件函数。首先我们要怎么获取到下拉列表的下标呢？直接var index =index;是不行的，这里我们可以调用微信小程序提供的一个函数getCurrentPages()，可以看到这样我们可以获取当前页面的数据

接下来就是找到下标值和指令文字 ，select是下标值 postdata 是指令文字

  var select =sele[sele.length-1].data.index;
  var postdata=sele[sele.length-1].data.selectData[select];

下来列表那么多指令，一个一个写肯定很繁琐，这里用switch来判断，就很方便

 switch(select){
       case 1:console.log(postdata);break;   //打开灯
       case 2:console.log(postdata);break;// 关闭灯
       case 3:console.log(postdata);break;  //打开风扇
       case 4:console.log(postdata);break;//关闭风扇
       case 5:console.log(postdata);break;//打开窗帘
       case 6:console.log(postdata);break;//关闭窗帘
       case 7:console.log(postdata);break; //打开加湿器
       case 8:console.log(postdata);break; //关闭加湿器
       default: ;break;
     
    }     

打开微信开发者工具的调试器就可以看到我们发送的相关指令，要应用于实际应用只需要把console.log(postdata);改成你想要发送的函数就可以了

百度网盘链接
链接：https://pan.baidu.com/s/1_kqo9NbKZSmvpsCaUz2Upw
提取码：y4pw

custom-drop-down/index.wxml

<!--pages/component/custom-drop-down/index.wxml-->
<view style="position: relative; display: flex; flex-direction: column;">
    <view style="display:flex; align-items: center; border:black 1px solid" bindtap="clickShow">
      <view class="dropdown-value">{{provinceValue}}</view>
      <image src="./../../../images/arrow-down.png" class="dropdown-image"></image>
    </view>
    <view style="height: 100px; border:darkgray 1px solid" wx:if="{{show}}">
      <scroll-view style="height: 100px;" scroll-y="ture">
        <view wx:for="{{option2}}" wx:key="value" bindtap="selectIndex" data-index="{{index}}" class="dropdown-item">
          {{item.text}}<image src="./../../../images/duihao.png" class="dropdown-item-img" wx:if="{{item.selected}}"></image>
        </view>
      </scroll-view>

    </view>
  </view>

custom-drop-down/index.wxss

/* pages/component/custom-drop-down/index.wxss */
.dropdown-item {
  margin: 10px 10px;
}
.dropdown-item-img {
  float: right;
  right: 15px;
  width: 16px; height: 16px;
}
.dropdown-image {
  width: 16px; height: 16px;
}
.dropdown-value {
  flex: 1;padding-left: 5px;
}

custom-drop-down/index.js

// pages/component/custom-drop-down/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    option2: {
      type: Array,
      value: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ]
    },
    show: {
      type:Boolean,
      value:false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    provinceValue:'排序'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    clickShow: function() {
      this.setData({
        show:!this.data.show
      })
    },
    selectIndex: function(option) {
      console.log('selectIndex',option);
      let index = option.currentTarget.dataset.index;
      console.log('selectIndex====',this.data.option2[index].text);
      for(let i=0;i<this.data.option2.length;i++) {
        let item = this.data.option2[i];
        if(i == index) {
          item.selected = true;
        } else {
          item.selected = false;
        }
      }
      this.setData({
        provinceValue:this.data.option2[index].text,
        option2:this.data.option2,
        show:false
      })
    }
  }
})

custom-drop-down/index.json

{
  "component": true,
  "usingComponents": {}
}

调用：

<custom-dropdown option2="{{option2}}"></custom-dropdown>

下拉列表中的值选中后，关闭列表，再打开，值可记忆，并显示相应的选中样式

.wxml

<!--pages/component/custom-drop-down/index.wxml-->
<view class="drop-container">
    <view class="drop-main" bindtap="clickShow">
      <view class="dropdown-value">{{provinceValue}}</view>
      <image src="./../../../images/arrow-down.png" class="dropdown-image"></image>
    </view>
    <view class="list-style" wx:if="{{show}}">
      <scroll-view style="height: 100px;" scroll-y="ture" bindscrolltolower='loadMore'>
        <view wx:for="{{option2}}" wx:key="value" bindtap="selectIndex" data-index="{{index}}" class="dropdown-item">
          {{item.text}}<image src="./../../../images/duihao.png" class="dropdown-item-img" wx:if="{{item.selected}}"></image>
        </view>
      </scroll-view>

    </view>
  </view>

.js

// pages/component/custom-drop-down/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    option2: {
      type: Array,
      value: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ]
    },
    show: {
      type:Boolean,
      value:false
    },
    selectedData: {
      type:Object,
      value:{}
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    provinceValue:'请选择'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    clickShow: function() {
      this.setData({
        show:!this.data.show
      })
    },
    selectIndex: function(option) {
      console.log('selectIndex',option);
      let index = option.currentTarget.dataset.index;
      console.log('selectIndex====',this.data.option2[index].text);
      for(let i=0;i<this.data.option2.length;i++) {
        let item = this.data.option2[i];
        if(i == index) {
          item.selected = true;
        } else {
          item.selected = false;
        }
      }
      this.setData({
        provinceValue:this.data.option2[index].text,
        option2:this.data.option2,
        show:false
      })
      this.triggerEvent('getvalue',this.data.option2[index])
    },
    selectedValue(name) {
      for(let i=0;i<this.data.option2.length;i++) {
        let item = this.data.option2[i];
        if(item.text == name) {
          item.selected = true;
        } else {
          item.selected = false;
        }
      }
      this.setData({
        option2:this.data.option2
      })
    },
    loadMore(e) {
      console.log('loadMore',e);

    }
  },
  lifetimes:{
    attached() {
      if(Object.keys(this.data.selectedData).length === 0) {
        console.log('attached 111111');
      } else {
        this.selectedValue(this.data.selectedData.text)
        this.setData({
          provinceValue:this.data.selectedData.text
        })
      }
      // this.setData({
      //   provinceValue:this.data.option2[0].text
      // })
    }
  }
})

.wxss

/* pages/component/custom-drop-down/index.wxss */
.drop-container {
  position: relative; display: flex; flex-direction: column;
}
.drop-main {
  display:flex; align-items: center; 
  background: white;
  border: 1px solid #dfdfe2;
  border-radius: 5px;
  height: 32px;
  width: 100%;
}
.dropdown-item {
  margin: 10px 10px;
}
.dropdown-item-img {
  float: right;
  right: 15px;
  width: 16px; height: 16px;
}
.dropdown-image {
  width: 16px; height: 16px;
  margin-right: 8px;
}
.dropdown-value {
  flex: 1;
  padding-left: 16px;
  font-size: 12px;
}
.list-style {
  height: 100px; 
  border:darkgray 1px solid;
  position: absolute; 
  background-color: white;
  top:33px; 
  width: 100%;
  z-index: 100;
  border-radius: 2px 2px 5px 5px;
  font-size: 14px;
}

使用组件：

<custom-drop-down id="areaDrop" option2="{{shopList}}" selectedData="{{selectShop}}" bindgetvalue="getShopValue"></custom-drop-down>

options2是下拉列表的值，selectedData是记忆选中的值，再次打开下拉列表，该值将是选中状态