WeChat 애플릿 선택기 구성 요소 자세한 예제 코드

이 글에서는 주로 WeChat 애플릿 선택기 구성 요소에 대한 자세한 설명과 간단한 예를 소개합니다. 필요한 친구는

구현 렌더링을 참조할 수 있습니다:

WeChat 애플릿 선택기

스크롤 선택기, 이제 모드별로 구별되는 세 가지 선택기 지원(일반 선택기, 시간 선택기 , 날짜 선택기) , 기본값은 일반 선택기

일반 선택기: mode=selector

속성 이름

유형

기본값

설명

범위

属性名	类型	默认值	说明
range	Array	[]	mode为selector时，range有效
value	Number	0	mode为selector时，是数字，表示选择了range中的第几个，从0开始。
bindchange	EventHandle		value改变时触发change事件，event.detail= { value:value}

배열

[]

모드가 선택자인 경우 범위가 유효합니다

값

숫자

0

모드가 선택자인 경우 범위 내에서 어떤 숫자가 선택되었는지 나타내는 숫자이며 0부터 시작합니다.

bindchange

EventHandle

값이 변경되면 변경 이벤트가 트리거됩니다. event.detail = { 값 :값}

시간 선택기: 모드=시간

属性名	类型	默认值	说明
value	String		表示选中的时间，格式为"hh:mm"
	String		表示有效时间范围的开始，字符串格式为"hh:mm"
	String		表示有效时间范围的结束，字符串格式为"hh:mm"
	EventHandle		value改变时触发change事件，event.detail= { value:value}

속성 이름 유형 기본값 설명 thead> 값 문자열

td>

선택한 시간을 나타냅니다. 형식은 "hh:mm"입니다. 문자열 는 유효한 시간 범위의 시작을 나타냅니다. 문자열 형식 "hh:mm" 문자열 는 유효한 시간 범위, 문자 문자열 형식은 "hh:mm"입니다. EventHandle 값이 변경되면 변경 이벤트가 트리거됩니다. event.detail= { value:value} 날짜 선택기: mode=date

属性名	类型	默认值	说明
value	String	0	表示选中的日期，格式为"yyyy-MM-dd"
start	String		表示有效日期范围的开始，字符串格式为"yyyy-MM-dd"
end	String		表示有效日期范围的结束，字符串格式为"yyyy-MM-dd"
fields	String	day	有效值year,month,day，表示选择器的粒度
bindchange	EventHandle		value改变时触发change事件，event.detail= { value:value}

설명 tr>

속성 이름	유형	기본값
값	문자열	0	은 "yyyy- MM-dd" 형식의 선택한 날짜
start	String		유효한 날짜 범위의 시작을 나타냅니다. 문자열 형식은 "yyyy-MM-dd"
end	String		는 유효한 날짜 범위의 끝, 문자열 형식을 나타냅니다. "yyyy-MM-dd"
필드	문자열	일	유효한 값 ​​선택기의 세분성을 나타내는 연도, 월, 일입니다.
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>

rrree읽어주셔서 감사합니다. 모두에게 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!

위 내용은 WeChat 애플릿 선택기 구성 요소 자세한 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!