WeChat アプレット ピッカー ビュー コンポーネントの詳細なサンプル コード

この記事では主に、WeChat アプレットのピッカー ビュー コンポーネントの詳細な説明と簡単な例を紹介します。必要な友人は参照してください。

実装レンダリング:

ページ上の埋め込みスクロール セレクター

属性名	タイプ	デフォルト値	説明
値	数値配列		配列内の数字は、ピッカービューのピッカービュー列の選択された項目を表します（下記） ) インデックスは 0 から始まり、数値が picker-view-column オプションの長さより大きい場合、最後の項目が選択されます。
indicator-style	String		セレクターの中央で選択されたボックスのスタイルを設定します
bindchange	EventHandle		スクロール選択中に値が変化したときに変更イベントをトリガーします、event.detail = { value: value}; value は、picker-view の picker-view-column のどの項目が現在選択されているかを示す配列です (添え字は 0 から始まります)

注: は <picker-view-column></picker-view-column> コンポーネントに配置できます。他のノードは表示されません。 <picker-view-column></picker-view-column>组件，其他节点不会显示。

picker-view-column

仅可放置于<picker-view></picker-view>

picker-view-column

は <picker-view></picker-view> にのみ配置でき、その子ノードの高さはピッカーの高さと一致するように自動的に設定されます。 -view の選択ボックス

サンプル コード:

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

🎜

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

🎜 読んでいただきありがとうございます。皆さんのお役に立てれば幸いです。このサイトのご支援に感謝します。 🎜

以上がWeChat アプレット ピッカー ビュー コンポーネントの詳細なサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。