第一步：創建組件所需的文件

第二步：開始配置組件

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

總結

以上是生活随笔為你收集整理的微信小程序自定义select下拉选项框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。