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

.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是记忆选中的值，再次打开下拉列表，该值将是选中状态

效果图


test.js

/**
   * 页面的初始数据
   */
  data: {
    shows: false, //控制下拉列表的显示隐藏，false隐藏、true显示
    selectDatas: ['消费账户', '平台返利账户', '微信钱包'], //下拉列表的数据
    indexs: 0, //选择的下拉列 表下标,
  },

  // 点击下拉显示框
  selectTaps() {
    this.setData({
      shows: !this.data.shows,
    });
  },
  // 点击下拉列表
  optionTaps(e) {
    let Indexs = e.currentTarget.dataset.index; //获取点击的下拉列表的下标
    console.log(Indexs)
    this.setData({
      indexs: Indexs,
      shows: !this.data.shows
    });

  },

test.wxml

<view class='fenlei'>
  <text>地址</text>
  <!-- 下拉框 -->
    <view class='select_box'>
      <view class='select' catchtap='selectTaps'>
        <text class='select_text'>{{selectDatas[indexs]}}</text>
        <!-- <image class='words_img' src='../../images/sanjiao.png'></image> -->
        <image class='select_img {{shows&&"select_img_rotate"}}' src='../../images/sanjiao.png'></image>
      </view>
      <view class='option_box' style='height:{{shows?(selectDatas.length>5?300:selectDatas.length*60):0}}rpx;'>
        <text class='option' style='{{indexs==selectDatas.length-1&&"border:0;"}}' wx:for='{{selectDatas}}' wx:key='this' data-index='{{index}}' catchtap='optionTaps'>{{item}}</text>
      </view>
    </view>
</view>

test.wxss

/* fenlei */
.fenlei{
  margin: 0 25rpx;
  height: 90rpx;
  line-height: 90rpx;
  border-bottom: 1rpx solid #e6e6e6;
  display: flex;
  align-items: center;
}
.fenlei text{
  font-size: 30rpx;
  color: #999999;
  margin-left: 15rpx;
}
/* 下拉框 */
.select_box {
  background: #fff;
  width: 620rpx;
  /* margin: 0 auto; */
  height: 90rpx;
  line-height: 90rpx;
  text-align: left;
  position: relative;
}

.select {
  box-sizing: border-box;
  width: 100%;
  height: 86rpx;
  /* border: 1px solid #efefef; */
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}

.select_text {
  font-size: 28rpx;
  flex: 1;
  color: rgb(102, 102, 102);
  line-height: 86rpx;
  height: 86rpx;
}

.select_img {
  width: 40rpx;
  height: 40rpx;
  display: block;
  transition: transform 0.3s;
}

.select_img_rotate {
  transform: rotate(180deg);
}

.option_box {
  position: absolute;
  top: 86rpx;
  width: 100%;
  /* border: 1px solid #efefef; */
  box-sizing: border-box;
  height: 0;
  overflow-y: auto;
  border-top: 0;
  background: #fff;
  transition: height 0.3s;
  z-index: 100;
}

.option {
  display: block;
  line-height: 40rpx;
  font-size: 28rpx;
  border-bottom: 1px solid #efefef;
  padding: 10rpx;
  color: rgb(102, 102, 102);
}

第一步：创建组件所需的文件

第二步：开始配置组件

select.json

{
  "component": true,
  "usingComponents": {
    "select": "./select"
  }
}

第三步：自定义组件样式及js

select.wxml

<view class='com-selectBox'>
    <view class='com-sContent' bindtap='selectToggle'>
        <view class='com-sTxt'>{{nowText}}</view>
        <image src='../../public/image/index/jinru1@2x.png'  class='com-sImg'  animation="{{animationData}}"></image>
    </view>
    <view class='com-sList' wx:if="{{selectShow}}">
        <view wx:for="{{propArray}}" data-index="{{index}}" wx:key='' class='com-sItem' bindtap='setText'>{{item.text}}</view>
    </view>
</view>

select.wxss

.com-selectBox{
  width: 200px;
}
.com-sContent{
  border: 1px solid #e2e2e2;
  background: white;
  font-size: 16px;
  position: relative;
  height: 30px;
  line-height: 30px;
}
.com-sImg{
  position: absolute;
  right: 10px;
  top: 11px;
  width: 16px;
  height: 9px;
  transition: all .3s ease;
}
.com-sTxt{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding:0 20px 0 6px;
  font-size: 14px;
}
.com-sList{
  background: white;
  width: inherit;
  position: absolute;
  border: 1px solid #e2e2e2;
  border-top: none;
  box-sizing: border-box;
  z-index: 3;
  max-height: 120px;
  overflow: auto;
}
.com-sItem{
  height: 30px;
  line-height: 30px;
  border-top: 1px solid #e2e2e2;
  padding: 0 6px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.com-sItem:first-child{
  border-top: none;
}

select.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    propArray: {
      type: Array,
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    selectShow: false, //初始option不显示
    nowText: "请选择", //初始内容
    animationData: {} //右边箭头的动画
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //option的显示与否
    selectToggle: function () {
      var nowShow = this.data.selectShow; //获取当前option显示的状态
      //创建动画
      var animation = wx.createAnimation({
        timingFunction: "ease"
      })
      this.animation = animation;
      if (nowShow) {
        animation.rotate(0).step();
        this.setData({
          animationData: animation.export()
        })
      } else {
        animation.rotate(180).step();
        this.setData({
          animationData: animation.export()
        })
      }
      this.setData({
        selectShow: !nowShow
      })
    },
    //设置内容
    setText: function (e) {
      var nowData = this.properties.propArray; //当前option的数据是引入组件的页面传过来的，所以这里获取数据只有通过this.properties
      var nowIdx = e.target.dataset.index; //当前点击的索引
      var nowText = nowData[nowIdx].text; //当前点击的内容
      //子组件触发事件
      var nowDate = {
        id: nowIdx,
        text: nowText
      }
      this.triggerEvent('myget', nowDate)
      //再次执行动画，注意这里一定，一定，一定是this.animation来使用动画
      this.animation.rotate(0).step();
      this.setData({
        selectShow: false,
        nowText: nowText,
        animationData: this.animation.export()
      })
    }
  }
})

第四步：引入组件，传入组件所需数据

1、引入组件的页面的json文件中配置

{
  "usingComponents": {
    "Select": "../../components/select/select"
  },
  "navigationBarTitleText": ""
}

2、引入组件的页面的wxml文件中配置
bind:myget=‘getDate’ 对组件的事件进行监听

<Select prop-array='{{selectArray}}' bind:myget='getDate'></Select>

3、引入组件的页面的js文件中配置

data:{
	selectArray: [
		{
		    "id": "01",
		    "text": "停车A区"
		}, 
		{
		    "id": "02",
		    "text": "停车B区"
		}
	]
 }

getDate:function(e){
    console.log(e.detail)
}