小程序 下拉组件的实现

首先我们要封装 Component组件,那么 我们就要 创建它的目录

我们把 select.json 内容改成,这个样子 我们封装的组件 才可以在别的地方使用

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

select.html的内容

<view class="select-wrap">
	<view class="dropdown">
		<view class="select-header">
			<image src='/static/sign/sign_position.png' class="locationIcon">
			</image>
			<view>{{nowText}}</view>
		</view>

		<view class="sort">
			<view wx:for="{{propArray}}" data-index="{{index}}" wx:key="index" bindtap="selectOption">
				<text class="{{ selectId == index ? 'dropdown_active': '' }}">{{item.text}}</text>
				<image src="/static/my/hooks.png" class="option-correct {{selectId == index ? 'show': 'hide'}}"></image>
			</view>
		</view>
	</view>

	<!--设置遮罩层-->
	<view class="mask-layer" hidden="{{maskLayerOpen}}" bindtap="maskLayerClick">
	</view>
</view>

select.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    propArray: {
      type: Array,
    },
    locationId: {
      type: String
    },
    locationName: {
      type: String
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    nowText: "请选择赛区",//初始内容
    maskLayerOpen: false,
    selectId: 0
  },
  attached: function () {
    this.setData({
      selectId: this.data.locationId,
      nowText: this.data.locationName
    });
  },
  /**
   * 组件的方法列表
   */
  methods: {
    //设置内容
    selectOption: function (e) {
      //当前option的数据是引入组件的页面传过来的，所以这里获取数据只有通过this.properties
      var nowData = this.properties.propArray;
	  console.log(nowData)
      //当前点击的索引
      var nowIdx = e.currentTarget.dataset.index;

      //当前点击的内容
      var nowText = nowData[nowIdx].text;
      this.setData({
        nowText: nowText,
        // 这个是对遮罩层的 样式进行开关判断
        maskLayerOpen: false,
        selectId: nowIdx,
      })

      let currentDate = {
        id: nowData[nowIdx].id,
        text: nowText
      }
	  console.log(currentDate)
      // 这个 **triggerEvent** 是传递给Select 组件的内容的
      this.triggerEvent("selectOptionEvent", currentDate);
    }
  }
})

select.wxss 在小程序中 如果选择fiexd 定位的话,那么它的父元素也应该是 absolute 或者 fixed 这点要注意,不然很容易定位的层级问题,这个是小程序的一个坑.

.select-wrap {
	position: relative;
	width: 100%;
	height: 100%;
}

.select-wrap .dropdown {
	width: 100%;
	overflow: auto;
}

.select-wrap .dropdown .select-header {
	width: 100%;
	height: 31pt;
	position: fixed;
	top: 0pt;
	left: 0;
	z-index: 102;
	background: white;
}

.select-wrap .dropdown .select-header .locationIcon {
	width: 21pt;
	height: 21pt;
	float: left;
	margin-top: 5pt;
	background: white;
}

.select-wrap .dropdown .select-header view {
	float: left;
	width: calc(100% - 42pt);
	height: 21pt;
	line-height: 31pt;
	font-weight: bold;
	font-size: 12pt;
	color: #333333;
	font-family: "PingFang SC";
}

.select-wrap .dropdown .select-header .selectIcon {
	float: right;
	width: 21pt;
	height: 21pt;
}


.up {
	animation-name: slidown;
	/*名称*/
	animation-duration: 0.3s;
	/*持续时间*/
	animation-timing-function: linear;
	/*播放动画时从头到尾都以相同的速度*/
}

.down {
	animation-name: slidup;
	/*名称*/
	animation-duration: 0.3s;
	/*持续时间*/
	animation-timing-function: linear;
	/*播放动画时从头到尾都以相同的速度*/
}

.select-wrap .dropdown .sort {
	width: 100%;
	height: auto;
	position: fixed;
	left: 0;
	top: 31pt;
	z-index: 100;
	background-color: white;
}

.select-wrap .dropdown .sort view {
	display: flex;
	width: inherit;
	height: 31pt;
	line-height: 31pt;
	font-size: 11pt;
	font-weight: "Bold";
	font-family: "PingFang SC";
	color: #333333;
}


.select-wrap .dropdown .sort view .option-location {
	float: left;
	width: 21pt;
	height: 21pt;
	margin-top: 5pt;
}

.select-wrap .dropdown .sort view>text {
	float: left;
	padding-left: 21pt;
	width: calc(100% - 42pt);
	height: 31pt;
	line-height: 31pt;
	font-size: 12pt;
}

.select-wrap .dropdown .sort view .option-correct {
	float: right;
	width: 21pt;
	height: 21pt;
	margin-top: 5pt;
}

.dropdown_active {
	color: rgba(20, 130, 240, 1);
}

.show {
	display: block;
}

.hide {
	display: none
}

/*设置遮罩层*/
.mask-layer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 98;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.5;
}

在其他组件中使用

	<view wx:if="{{matchEvent}}">
	  // 其实 用法跟vue的用法 差不多
		<Select 
		   //这里是 传递给组件的参数
			prop-array="{{matchZone}}" 
			location-id="{{locationId}}" 
			location-name="{{locationName}}"
			
			//这里是 组件选择后 的回掉方法
		 	bind:selectOptionEvent="currentSelectOption"
		 ></Select>
	</view>

组件的js 中使用

	currentSelectOption: function(e) {
	   // 这里就可以 拿到 select.js 传递过来的 **currentDate** 的值了
		console.log(e);
	},

最终效果如下:

总体来说 ,个人认为 微信小程序的封装组件跟Vue 和 React差别不大, 如果任何问题 欢迎评论指出.谢谢.