自定义微信小程序下拉选择框组件
首先要新建一个组件
开始编码
定义完了组件,开始使用

预览效果图：↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓


========================================================
首先要新建一个组件
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，大功告成！

附上我的箭头图片 ↓↓↓↓

效果图





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);
}

	一般来说的话，总有点需要下拉并且能够搜索选择的需求。

首先wxml
<!-- 下拉菜单   -->
    <view class='menu-po'>
      <!-- 请选择 -->
      <view class='menu'>
        <view class='menu-list'>
          <view class="{{item.key==menuNums&&openPicker?'menu-nav2':'menu-nav'}}" wx:for="{{ msgList }}" wx:for-index="idx" data-key='{{item.key}}' wx:key="key" data-hi="{{ idx }}" data-name='{{item.name}}' bindtap="menuClick">
            <text class='menu-text'>{{ item.name }}</text>
            <image class='menu-image' src='/pages/img/pull.png'></image>
          </view>
        </view>
      </view>
      <!-- 列表栏 -->
      <view class='menu-if'>
        <!-- 区域 -->
        <view class="meun-txt over-auto" hidden='{{ meunShow[0].isShows ? true : false }}'>
          <scroll-view scroll-y="true" style="height: 446rpx">
            <text wx:for="{{ sousuoList }}" data-id="{{item.id}}" class='meun-city-txt meun-city-txt-price' bindtap='souSearch' data-name='{{item.name}}'>{{ item.name }}</text>
          </scroll-view>
        </view>

      </view>
    </view>

其次是wxss
.menu-po {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 25%;
  margin-left: 5%;
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 10px;
}

.menu-list {
  display: flex;
  justify-content: space-between;
}

.menu-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-nav2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-nav2 image {
  width: 24rpx;
  height: 15rpx;
}

.menu-nav2 text {
  font-size: 14px;
}

.menu-nav image {
  width: 24rpx;
  height: 15rpx;
}

.menu-nav text {
  color: #696969;
  font-size: 14px;
}

.shadow {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
  position: absolute;
  top: 210rpx;
}

.menu-if {
  background-color: #fff;
  box-sizing: border-box;
  position: absolute;
  z-index: 9;
  margin-left: -15px;
  width: 100%;
}

.swiper-item {
  background: #fff;
  width: 100%;
  height: 600rpx;
  display: none;
  position: absolute;
  top: 100rpx;
  z-index: 333333;
  left: 0;
  animation: displays 1s;
}

.meun-txt {
  height: auto;
  color: #696969;
}

.menu-text-list {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.menu-text-list-left {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding-left: 35rpx;
}

/* text样式 */

.meun-city-txt {
  display: block;
  border-bottom: 1rpx solid #e9e9e9;
  width: 100%;
  padding: 25rpx 0;
  font-size: 14px;
}

.meun-city-txt-price {
  display: flex;
  justify-content: center;
}

.menu-text-list-rig {
  width: 50%;
  position: absolute;
  top: 0;
  right: 0;
  background-color: #f9f9f9;
  z-index: 10;
  box-sizing: border-box;
  padding-left: 35rpx;
}



最后是js文件
Page({

  /**
   * 页面的初始数据
   */
  data: {
    msgList: [{
      key: 1,
      name: '请选择'
    }],
    // 判断导航栏列表是否显示
    meunShow: [{
      isShows: true
    }],
    sousuoList: [{
      id: 1,
      name: '新房'
    }, {
      id: 2,
      name: '二手房'
    }, {
      id: 3,
      name: '写字楼'
    }, {
      id: 4,
      name: '商铺'
    }, {
      id: 5,
      name: '出租'
    }],
  },
  souSearch: function (e) {
    var that = this;
    var openPicker = this.data.openPicker;
    var house_name = e.target.dataset.name;

    var msgList = that.data.msgList;
    this.setData({
      openPicker: !openPicker,
    })
    for (var i = 0; i < msgList.length; i++) {
      var keys = msgList[i].key;
      if (keys == 1) {
        msgList[i].name = house_name;
        that.setData({
          msgList: msgList,
          house_name: house_name
        })
      }
    }


    var menuNum = that.data.menuNum;
    var meunShow = this.data.meunShow;
    var menuSrc = "meunShow[" + menuNum + "].isShows";
    // console.log('menuNum:' + menuNum);
    for (var n = 0; n < meunShow.length; n++) {
      // 拼接 ，使我们可以获取到menuShow里面每一个isSHows
      var menuSrcs = meunShow[n].isShows;
      // console.log('menuSrcs:' + menuSrcs);
      // 解决重复点击不能隐藏的问题
      if (n != menuNum) {

        this.setData({
          menuSrcs: true
        });
      };
    };

    // 给当前点击的去反data中设置的meunShow，使之显示， 只写此处只会显示不能隐藏
    this.setData({
      [menuSrc]: !this.data.meunShow[menuNum].isShows
    });

  },

  menuClick: function (e) {
    // 获取通过wxml  data-hi="{{ idx }}" 传过来的索引
    var that = this;
    var menuNum = e.currentTarget.dataset.hi;
    that.setData({
      menuNum: menuNum
    })
    var name = e.currentTarget.dataset.name;
    if (name == that.data.name) {
      // console.log('==');
      that.setData({
        openPicker: !this.data.openPicker,
      })
    } else {
      // console.log('!=');
      that.setData({
        openPicker: true,
      })
    }

    that.setData({
      name: name
    })
    // console.log(name + ',' + menuNum);
    // 拼接 ，使我们可以获取到menuShow里面每一个isSHows
    var menuSrc = "meunShow[" + menuNum + "].isShows";
    // console.log('picker:' + this.data.openPicker);
    this.setData({
      needAnimation: true,
      menuNums: menuNum + 1
    });

    // 循环data中设置的meunShow
    for (var n = 0; n < this.data.meunShow.length; n++) {
      // 拼接 ，使我们可以获取到menuShow里面每一个isSHows
      var menuSrcs = "meunShow[" + n + "].isShows";
      // 解决重复点击不能隐藏的问题
      if (n != menuNum) {
        // 初始化，每次点击时先全部隐藏，但是重复点击不会隐藏
        this.setData({
          [menuSrcs]: true
        });
      };
    };

    // 给当前点击的去反data中设置的meunShow，使之显示， 只写此处只会显示不能隐藏
    this.setData({
      [menuSrc]: !this.data.meunShow[e.currentTarget.dataset.hi].isShows
    });
  },
  })

这就是下拉选择框的全部代码了。

效果图：



 

1.wxml



 

2.wxss

.list-msg { 

padding: 0 10rpx;

background-color: #fff;

position: relative;

width: 90%;

margin: 30rpx auto;

}

 

.list-msg .list-msg2 {

height: 70rpx;

display: flex;

align-items: center;

justify-content: space-around;

border: 1px solid #f89219;

padding: 0 20rpx;

color: #f89219;

border-radius: 10rpx;

}

 

.select_box {

padding: 0;

width: 97%;

position: absolute;

top: 90rpx;

z-index: 1;

overflow: hidden;

animation: myfirst 0.5s;

text-align: center;

border: 1px solid #f89219;

color: #f89219;

border-radius: 10rpx;

}

 

@keyframes myfirst {

from {

height: 0rpx;

}

 

to {

height: 300rpx;

}

}

 

.select_one {

height: 70rpx;

line-height: 70rpx;

border-bottom: 1px solid #f89219;

background: #fff;

}

 

.select_one:last-child {

border-bottom: none;

}

 

3.js

data: {

select: false,

tihuoWay: '五年级上册第一关班级内详情',

}

bindShowMsg() {

this.setData({

select: !this.data.select

})

},

mySelect(e) {

var name = e.currentTarget.dataset.name

this.setData({

tihuoWay: name,

select: false

})

},