이 글은 주로 WeChat 애플릿 선택기 구성 요소의 간단한 사용법을 소개하며 선택기 구성 요소의 기능, 사용법 및 관련 주의 사항을 예제 형식으로 자세히 분석합니다. WeChat 애플릿 선택기 구성 요소를 설명합니다. 참조용으로 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다:
picker 롤링 선택기, 이제 모드별로 구별되는 세 가지 선택기, 즉 일반 선택기(
mode=selector), 시간 선택기(mode=time )를 지원합니다. 날짜 선택기(mode=date), 기본값은 일반 선택기입니다. 구체적인 함수 설명은 다음과 같습니다.
일반 선택기: mode=selector
Type | 기본값 | Description | |
---|---|---|---|
배열 | [ ] | mode가 selector인 경우 범위가 유효합니다 | |
Number | 0 | mode가 selector인 경우 범위 내에서 어떤 숫자가 선택되었는지 나타내는 숫자이며 0부터 시작합니다. | |
EventHandle | 값이 변경되면 변경 이벤트가 트리거됩니다. event.detail= { value:value}
|
event.detail= { value:value} |
时间选择器:mode=time
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | 表示选中的时间,格式为"hh:mm" | |
start | String | 表示有效时间范围的开始,字符串格式为"hh:mm" | |
end | String | 表示有效时间范围的结束,字符串格式为"hh:mm" | |
bindchange | EventHandle | value改变时触发change事件,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}
|
속성 이름
Type
기본값
Description
h입니다. h:mm 🎜🎜🎜은 유효한 시간 범위의 시작을 나타내며, 문자열 형식은 "🎜hh:mm🎜"🎜🎜🎜🎜 end🎜🎜String🎜🎜 🎜🎜은 유효한 시간 범위의 끝을 나타냅니다. 문자열 형식은 "🎜hh ; =date🎜🎜🎜🎜🎜🎜속성 이름🎜🎜Type🎜🎜기본값🎜🎜Description🎜🎜🎜🎜🎜🎜value🎜🎜String🎜🎜0🎜🎜입니다. 선택한 날짜, 형식을 나타냅니다. "🎜yy yy-MM-dd🎜"🎜🎜🎜🎜start🎜🎜String🎜🎜🎜🎜은 유효한 날짜 범위의 시작을 나타냅니다. 문자열 형식은 "🎜yyyy-MM-dd🎜"🎜🎜🎜🎜end입니다. 🎜🎜String🎜🎜🎜🎜은 유효한 날짜 범위 끝을 나타냅니다. 문자열 형식은 "🎜yyyy-MM-dd🎜"🎜🎜🎜🎜fields🎜🎜String🎜🎜day🎜🎜유효한 값은 연도, 월, 일입니다. , 선택기의 세분성을 나타냅니다🎜🎜🎜🎜bindchange🎜🎜EventHandle🎜 🎜 🎜🎜변경 이벤트는 값이 변경될 때 트리거됩니다.event.detail= { value:value}
🎜🎜🎜🎜🎜 샘플 코드는 다음과 같습니다. 🎜🎜picker.wxml: 🎜<view class="section"> <view class="section__title">地区选择器</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 当前选择:{{array[index]}} </view> </picker> </view> <view class="section"> <view class="section__title">时间选择器</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="section__title">日期选择器</view> <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <view class="picker"> 当前选择: {{date}} </view> </picker> </view>🎜picker.js: 🎜
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.value }) } })🎜간단한 스타일 레이아웃 picker.wxss: 🎜
.section { display: flex; flex-direction: column; padding: 20rpx 0rpx; color: #333; } .section__title{ font-size: 40rpx; margin: 10rpx 0rpx; }🎜위 내용은 모두에게 도움이 되기를 바랍니다. 미래에. 🎜🎜관련 기사: 🎜🎜🎜전역 메소드를 통해 Vue.use() 구성 요소를 사용하는 방법 🎜🎜🎜🎜JavaScript에서 상수 생성 정보(자세한 튜토리얼) 🎜🎜🎜🎜웹 페이지를 닫고 js에서 프롬프트를 남기는 방법 (자세한 튜토리얼) 🎜🎜🎜🎜 JavaScript 문에서 다음 세미콜론 관련 문제🎜🎜🎜🎜WeChat 미니 프로그램에서 wx.previewImage를 사용하여 이미지를 미리 보는 방법🎜🎜
위 내용은 WeChat 미니 프로그램에서 선택기 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!