Detaillierter Beispielcode für die WeChat-Applet-Auswahlkomponente

高洛峰
Freigeben: 2017-03-21 16:50:50
Original
3085 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung und einfache Beispiele der Picker-View-Komponente des WeChat-Applets vor. Freunde in Not können sich auf die

Implementierungsdarstellungen beziehen:

Detaillierter Beispielcode für die WeChat-Applet-Auswahlkomponente

Eingebetteter Seiten-Scroll-Selektor

属性名 类型 默认值 说明
value Number Array   数组中的数字依次表示 picker-view 内的 picker-view-colume 选择的第几项(下标从 0 开始),数字大于 picker-view-column 可选项长度时,选择最后一项。
indicator-style String   设置选择器中间选中框的样式
bindchange EventHandle   当滚动选择,value 改变时触发 change 事件,event.detail = {value: value};value为数组,表示 picker-view 内的 picker-view-column 当前选择的是第几项(下标从 0 开始)

Hinweis: Es kann nur die <picker-view-column></picker-view-column>-Komponente darin platziert werden, andere Knoten werden nicht angezeigt.

picker-view-column

kann nur in <picker-view></picker-view> platziert werden und die Höhe seiner untergeordneten Knoten wird automatisch so eingestellt, dass sie mit der Höhe des Kontrollkästchens „picker-view“ übereinstimmt

Beispielcode:


<view>
 <view>{{year}}年{{month}}月{{day}}日</view>
 <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
 <picker-view-column>
 <view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
 </picker-view-column>
 <picker-view-column>
 <view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
 </picker-view-column>
 <picker-view-column>
 <view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
 </picker-view-column>
 </picker-view>
</view>
Nach dem Login kopieren


const date = new Date()
const years = []
const months = []
const days = []

for (let i = 1990; i <= date.getFullYear(); i++) {
 years.push(i)
}

for (let i = 1 ; i <= 12; i++) {
 months.push(i)
}

for (let i = 1 ; i <= 31; i++) {
 days.push(i)
}

Page({
 data: {
 years: years,
 year: date.getFullYear(),
 months: months,
 month: 2,
 days: days,
 day: 2,
 year: date.getFullYear(),
 value: [9999, 1, 1],
 },
 bindChange: function(e) {
 const val = e.detail.value
 this.setData({
 year: this.data.years[val[0]],
 month: this.data.months[val[1]],
 day: this.data.days[val[1]]
 })
 }
})
Nach dem Login kopieren

Vielen Dank fürs Lesen, Ich hoffe, es hilft allen. Vielen Dank. Vielen Dank für Ihre Unterstützung dieser Website!

Das obige ist der detaillierte Inhalt vonDetaillierter Beispielcode für die WeChat-Applet-Auswahlkomponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage