小程式下拉框

2022-04-09 23:59:10 字數 2085 閱讀 5353

右鍵這個資料夾，新建下面的這個component。然後輸入需要建立的名稱，我這裡為了方便就取了select的名字。然後就會自動建立4個檔案，js、json、wxml、wxss。

元件樣式

元件的wxml

class='


com-selectbox


'>


class='


com-scontent


' bindtap='


selecttoggle


'>


class='


com-stxt


'>}


'../../public/img/local/down.png


'class='


com-simg


' animation="


}">


class='


com-slist


' wx:if="


}">


for="


}" data-index="


}" wx:key=''


class='


com-sitem


' bindtap='


settext


'>}
元件的js

// componet/componet.js

component(

},/**

* 元件的初始資料

*/data: //右邊箭頭的動畫

},/**

* 元件的方法列表

*/methods: )

this.animation=animation;

if(nowshow))

}else)

}this.setdata()

},//設定內容

settext:function(e))

var nowdate=

this.triggerevent('myget', nowdate)}}

})元件的wxss

.com-selectbox


.com-scontent


.com-simg


.com-stxt


.com-slist


.com-sitem


.com-sitem:first-child
引入元件（下面**都是在你要加入元件的額頁面中新增）

1,在你引入元件的頁面的json檔案中配置

"


usingcomponents


":
2.在wxml中需要引入的位置插入下面**

'


}' bind:myget='


getdate


'>
3.在js中插入

selectarray: [, ,,,


,,,,
通訊你加入元件的頁面wxml中，插入的下面**是用來對元件的資料進行繫結。

'


}' bind:myget='


getdate


'>
在你加入元件的頁面js中，加入的新函式是為了獲取選擇的值。（需要複製下面**），你可以在下面這個函式中，對選擇的值做處理。

getdate:function(e)
效果如下

微信小程式 select 下拉框元件

一 原始碼位址 二 效果圖 三 元件原始碼 1.select.wxml view class select box view class select current catchtap openclose text class current name text view view class op...

下拉框 列舉

列舉 public enum mchtprofitsplittype public string getvalue class 初始化中要放到下拉列表裡的 分賬方式列舉mchtprofitsplittype listorgprofitsplittypelist new arraylist mchtp...

下拉框元件

createselect.js text 建立民族陣列 var arraynation new array 漢族 蒙古族 彝族 侗族 哈薩克族 畲族 納西族 仫佬族 仡佬族 怒族 保安族 鄂倫春族 回族 壯族 瑤族 傣族 高山族 景頗族 羌族 錫伯族 烏孜別克族 裕固族 赫哲族 藏族 布依族 白族 ...