初始化

components/wanselect/wanselect.js

@@ -0,0 +1,45 @@
+// pages/components/selector/selector.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    listData: {
+      type: Array,
+      value: [],
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    selectShow: false,
+    index: 0
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    // 点击下拉显示框
+    /**
+     * 切换选择框的显示状态
+     * 通过修改selectShow的值来控制选择框的显示/隐藏
+     */
+    selectTap() {
+      this.setData({
+        selectShow: !this.data.selectShow
+      });
+    },
+    // 点击下拉列表
+    optionTap(e) {
+      let Index = e.currentTarget.dataset.index; //获取点击的下拉列表的下标
+      this.setData({
+        selectShow: !this.data.selectShow,
+        index: Index
+      });
+      this.triggerEvent('optionTap', this.data.listData[Index])
+    },
+  }
+})

components/wanselect/wanselect.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/wanselect/wanselect.wxml

@@ -0,0 +1,11 @@
+<view class='select_box'>
+  <view class='select' catchtap='selectTap'>
+    <text class='select_text'>{{listData[index]}}</text>
+    <text >{{selectShow ? '▲' : '▼'}}    </text>
+  </view>
+  <view class='option_box' wx:if="{{selectShow}}"
+    style='height:{{selectShow?(listData.length>5?325:listData.length*50):0}}rpx;'>
+    <text class='option' wx:for='{{listData}}' wx:key='index' data-index='{{index}}'
+      catchtap='optionTap'>{{item}}</text>
+  </view>
+</view>

components/wanselect/wanselect.wxss

@@ -0,0 +1,63 @@
+/* pages/components/selector/selector.wxss */
+
+.select_box {
+  background: #fff;
+  width: 100%;
+  height: 100%;
+  border-radius: 14rpx;
+  position: relative;
+  border: 1px solid #ccc;
+  z-index: 10;
+}
+
+.select_box .select {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-radius: 8rpx;
+  display: flex;
+  align-items: center;
+  padding: 0 10rpx;
+}
+
+.select_box .select .select_text {
+  font-size: 26rpx;
+  color: #777777;
+  line-height: 28rpx;
+  flex: 1;
+}
+
+.select_box .select .select_img {
+  width: 30rpx;
+  height: 30rpx;
+  display: block;
+  transition: transform 0.3s;
+}
+
+.select_box .select .select_img_rotate {
+  transform: rotate(180deg);
+}
+
+.select_box .option_box {
+  position: absolute;
+  top: 50rpx;
+  left: 0;
+  width: 100%;
+  box-sizing: border-box;
+  height: 0;
+  overflow-y: auto;
+  background: #fff;
+  transition: height 0.3s;
+  border-left: 1px solid #efefef;
+  border-right: 1px solid #efefef;
+
+}
+
+.select_box .option_box .option {
+  display: block;
+  line-height: 30rpx;
+  font-size: 26rpx;
+  border-top: 1px solid #efefef;
+  border-bottom: 1px solid #efefef;
+  padding: 10rpx;
+}