第一步：创建组件所需的文件
第二步：开始配置组件
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.propertiesvar 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)}
