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

高洛峰
풀어 주다: 2017-03-21 16:48:49
원래의
2795명이 탐색했습니다.

이 글에서는 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿