ホームページ > 記事 > WeChat アプレット > WeChat アプレット ピッカー コンポーネントの詳細なコード例
この記事では、主に WeChat アプレット ピッカー コンポーネントの詳細な説明と簡単な例を紹介します。必要な友人は、
実装レンダリングを参照してください:
WeChat アプレット ピッカー
3 つのセレクターをサポートするようになりました。モードによって区別され、通常のセレクター、時間セレクター、日付セレクター、デフォルトは通常のセレクター
通常のセレクター: mode=selector
属性名 | タイプ | デフォルト値 | 説明 |
---|---|---|---|
range | Array | [] | modeがセレクターの場合、rangeが有効 |
value | Number | 0 | モードがセレクターの場合、範囲内のどの番号が選択されているかを示す番号 (0 から始まります)。 |
bindchange | EventHandle | 値が変更されるとchangeイベントがトリガーされます。event.detail= { value:value} |
時間セレクター: mode=time
プロパティ名 | タイプ | デフォルト値 | 説明 |
---|---|---|---|
value | String | は選択された時間を表し、形式は「hh:mm」です | |
文字列 | 有効な時間範囲の始まりを表します。String形式は "hh:mm" です。 | ||
String | 有効な時間範囲の終わりを表します。 | ||
EventHandle | 値が変更されると変更イベントがトリガーされます。event.detail= {value:value} |
日付ピッカー: mode=date
属性名 | タイプ | デフォルト値 | 説明 |
---|---|---|---|
value | String | 0 | は選択された日付を表し、形式は「yyyy-MM-dd」です |
start | 文字列 | は有効な日付範囲を示し、文字列形式は「yyyy-MM-dd」です | |
end | String | は有効な日付範囲の終わりを表し、文字列形式は「yyyy」です-MM-dd" | |
フィールド | String | day | 有効な値は、セレクターの粒度を示す年、月、日です |
bindchange | EventHandle | イベント値が変更されるとトリガーされます。event.detail= { value:value} |
サンプルコード:
<view class="section"> <view class="sectiontitle">地区选择器</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 当前选择:{{array[index]}} </view> </picker> </view> <view class="section"> <view class="sectiontitle">时间选择器</view> <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> <view class="picker"> 当前选择: {{time}} </view> </picker> </view> <view class="section"> <view class="sectiontitle">日期选择器</view> <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <view class="picker"> 当前选择: {{date}} </view> </picker> </view>
Page({ data: { array:["美国","中国","巴西","日本"], index:0, date:"2016-09-01", time:"12:01" }, bindPickerChange: function(e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ index: e.detail.value }) }, bindDateChange:function(e){ this.setData({ date:e.detail.value }) }, bindTimeChange:function(e){ this.setData({ time:e.detail.time }) } })
お読みいただきありがとうございます。皆様のお役に立てれば幸いです。このサイトのご支援に感謝いたします!
以上がWeChat アプレット ピッカー コンポーネントの詳細なコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。