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 サイトの他の関連記事を参照してください。