ホームページ  >  記事  >  WeChat アプレット  >  WeChat アプレット ピッカー コンポーネントの詳細なコード例

WeChat アプレット ピッカー コンポーネントの詳細なコード例

高洛峰
高洛峰オリジナル
2017-03-21 16:48:492780ブラウズ

この記事では、主に 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(&#39;picker发送选择改变,携带值为&#39;, 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。