検索
ホームページWeChat アプレットミニプログラム開発WeChat アプレットのセレクター (時刻、日付、地域) の分析

WeChat アプレットのセレクター (時刻、日付、地域) の分析

Jun 26, 2018 pm 03:48 PM
WeChat アプレットセレクタ

この記事では、WeChat アプレット セレクター (時刻、日付、地域) の例の詳細な説明に関する関連情報を主に紹介し、必要な友人がこの部分の知識を学び理解できるように、サンプル コードと実装レンダリングをここに示します。参考にしてください

WeChatアプレットセレクター(時刻、日付、地域)

WeChatアプレット開発 最近WeChatアプレットの開発を勉強したので、日付セレクターについては自分の実践結果をもとに整理しました。と時間セレクター、地域セレクターの例にいくつかの間違いがありますので、修正していただければ幸いです。

WeChat エンベロープにパッケージ化されたコントロールは非常に優れており、開発者にとっては多くの手間が省けますが、今日はセレクターを試してみました:

。アップロードコード:

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 項目のインデックスを選択し、配列を通じて値を取得します。

選択時に代替項目を追加するだけです。


②時間セレクター

mode = time の場合、start と end はそれぞれ有効な時間範囲の開始と終了であり、選択されると、bindTimeChange イベントがトリガーされます。

③日付セレクター


mode = date の場合、start と end はそれぞれ有効な日付範囲の開始と終了です。形式 yyyy-MM-dd は、選択すると、bindDateChange イベントが実行され、日付が取得されます

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。


関連する推奨事項:

WeChat アプレットでデータをジャンプして転送する方法

WeChat アプレットで setData を使用する方法

WeChat アプレットで日付と時刻ピッカーを使用する方法


以上がWeChat アプレットのセレクター (時刻、日付、地域) の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。