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>

① 일반 선택기

선택기는 모드별로 구분됩니다. 기본값은 일반 선택기이며, e로 구한 값입니다. Detail.value 항목의 인덱스를 선택한 후 배열을 통해 값을 가져오는 것입니다. 데이터를 초기화할 때 배열에 대체 항목을 추가하면 됩니다.

인덱스를 가져오도록 선택할 때 findPickerChange 이벤트를 트리거합니다.

②시간 선택기

mode = 시간인 경우 시작과 끝은 각각 유효한 시간 범위의 시작과 끝입니다. 형식을 선택하면 바인딩TimeChange 이벤트가 발생합니다. the time.

3Date selector

mode = date이면 시간 선택기입니다. start와 end는 각각 유효한 날짜 범위의 시작과 끝입니다. yyyy-MM-dd

형식은 binDateChange 이벤트를 트리거합니다. 선정되면 날짜를 받습니다

이상은 이 글의 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

WeChat 애플릿에서 데이터를 이동하고 전송하는 방법

WeChat 애플릿에서 setData를 사용하는 방법

WeChat 애플릿에서 날짜 및 시간 선택기를 사용하는 방법

위 내용은 WeChat 애플릿의 선택기(시간, 날짜, 지역) 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!