집 >위챗 애플릿 >미니 프로그램 개발 >WeChat 애플릿 선택기(시간, 날짜, 지역) 예시에 대한 자세한 설명
이 글에서는 WeChat 애플릿 선택기(시간, 날짜, 지역) 예제에 대한 자세한 설명에 대한 관련 정보를 주로 소개합니다. 여기에는 모든 사람이 이 부분의 지식을 배우고 이해할 수 있도록 예제 코드와 구현 렌더링이 제공됩니다. 다음
WeChat 애플릿 선택기(시간, 날짜, 지역)
WeChat 애플릿 개발 최근에 WeChat 애플릿 개발을 배웠기 때문에, 제가 직접 연습한 결과를 토대로 정리한 결과 날짜 선택기, 시간 선택기, 지역 선택기의 예시를 몇 가지 찾아보았는데, 혹시 틀린 부분이 있으면 수정해 주시기 바랍니다.
WeChat 봉투에 포함된 컨트롤은 느낌이 매우 좋고 개발자에게 많은 어려움을 안겨줍니다. 단점은 많은 사용자 정의를 할 수 없다는 것입니다.
gif 업로드:
업로드 코드:
1.index.js
//index.js //获取应用实例 var app = getApp() Page({ data: { date: '2016-11-08', time: '12:00', array: ['中国', '巴西', '日本', '美国'], index: 0, }, onLoad: function () { }, // 点击时间组件确定事件 bindTimeChange: function (e) { this.setData({ time: e.detail.value }) }, // 点击日期组件确定事件 bindDateChange: function (e) { this.setData({ date: e.detail.value }) }, // 点击国家组件确定事件 bindPickerChange: function (e) { this.setData({ index: e.detail.value }) } }) 2.index.wxml [html] view plain copy <!--index.wxml--> <view class="section" style="background:#787878;margin:20rpx;padding:20rpx"> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker"> 国家:{{array[index]}} </view> </picker> </view> <view class="section" style="background:#787878;margin:20rpx;padding:20rpx"> <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange"> <view class="picker"> 时间 : {{time}} </view> </picker> </view> <view class="section" style="background:#787878;margin:20rpx;padding:20rpx"> <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange"> <view class="picker"> 日期: {{date}} </view> </picker> </view>
①일반 선택기
기본값은 일반 선택기입니다. value 얻은 값은 선택한 항목의 인덱스 인덱스이며 배열을 통해 값을 얻습니다. 데이터를 초기화할 때 배열에 대체 항목을 추가하면 됩니다.
bindPickerChange 이벤트를 트리거합니다.
②시간 선택기
모드 = 시간인 경우 시작과 끝이 시간 선택기입니다. 유효한 시간 범위는 각각 hh:mm
형식으로 선택 시 바인딩 시간 변경 이벤트를 트리거하고 시간을 가져옵니다.
③날짜 선택기
모드 = 날짜인 경우 , 시간 선택기입니다. start 및 end는 각각 유효한 날짜 범위의 시작과 끝입니다. yyyy-MM-dd
형식을 선택하면 바인딩 날짜 변경 이벤트가 트리거되고 날짜
위 내용은 WeChat 애플릿 선택기(시간, 날짜, 지역) 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!