微信小程序自定義select下拉選項框的方法

更新時間：2022年05月24日 15:02:18 作者：爛泥也能扶上墻

這篇文章主要為大家詳細介紹了微信小程序自定義select下拉選項框的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序自定義select下拉選項框的具體代碼，供大家參考，具體內(nèi)容如下

第一步：創(chuàng)建組件所需的文件

第二步：開始配置組件

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,
? ? }
? },
? /**
? ?* 組件的初始數(shù)據(jù)
? ?*/
? data: {
? ? selectShow: false, //初始o(jì)ption不顯示
? ? nowText: "請選擇", //初始內(nèi)容
? ? animationData: {} //右邊箭頭的動畫
? },
? /**
? ?* 組件的方法列表
? ?*/
? methods: {
? ? //option的顯示與否
? ? selectToggle: function () {
? ? ? var nowShow = this.data.selectShow; //獲取當(dāng)前option顯示的狀態(tài)
? ? ? //創(chuàng)建動畫
? ? ? 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
? ? ? })
? ? },
? ? //設(shè)置內(nèi)容
? ? setText: function (e) {
? ? ? var nowData = this.properties.propArray; //當(dāng)前option的數(shù)據(jù)是引入組件的頁面?zhèn)鬟^來的，所以這里獲取數(shù)據(jù)只有通過this.properties
? ? ? var nowIdx = e.target.dataset.index; //當(dāng)前點擊的索引
? ? ? var nowText = nowData[nowIdx].text; //當(dāng)前點擊的內(nèi)容
? ? ? //子組件觸發(fā)事件
? ? ? var nowDate = {
? ? ? ? id: nowIdx,
? ? ? ? text: nowText
? ? ? }
? ? ? this.triggerEvent('myget', nowDate)
? ? ? //再次執(zhí)行動畫，注意這里一定，一定，一定是this.animation來使用動畫
? ? ? this.animation.rotate(0).step();
? ? ? this.setData({
? ? ? ? selectShow: false,
? ? ? ? nowText: nowText,
? ? ? ? animationData: this.animation.export()
? ? ? })
? ? }
? }
})

第四步：引入組件，傳入組件所需數(shù)據(jù)

1、引入組件的頁面的json文件中配置

{
? "usingComponents": {
? ? "Select": "../../components/select/select"
? },
? "navigationBarTitleText": ""
}

2、引入組件的頁面的wxml文件中配置
bind:myget=‘getDate’ 對組件的事件進行監(jiān)聽

<Select prop-array='{{selectArray}}' bind:myget='getDate'></Select>

3、引入組件的頁面的js文件中配置

data:{
?? ?selectArray: [
?? ??? ?{
?? ??? ? ? ?"id": "01",
?? ??? ? ? ?"text": "停車A區(qū)"
?? ??? ?},?
?? ??? ?{
?? ??? ? ? ?"id": "02",
?? ??? ? ? ?"text": "停車B區(qū)"
?? ??? ?}
?? ?]
?}

getDate:function(e){
? ? console.log(e.detail)
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: