Développement d'applets WeChat : introduction détaillée du sélecteur de défilement-Développement de mini-programmes-php.cn

Maison

Applet WeChat

Développement de mini-programmes

Développement d'applets WeChat : introduction détaillée du sélecteur de défilement

Mar 26, 2017 pm 03:20 PM

小程序

Description du composant :

Sélecteur :

Sélecteur de défilement, prend désormais en charge trois sélecteurs, distingués par l'attribut mode, qui sont des sélecteurs ordinaires (mode = sélecteur), un sélecteur de sélection temporelle (mode = heure), sélecteur de date (mode = date), la valeur par défaut est un sélecteur normal.

wxml

<view class="page">
  <view class="page__hd">
    <text class="page__title">picker</text>
    <text class="page__desc">选择器</text>
  </view>
  <view class="page__bd">
    <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>
  </view>
</view>

Copier après la connexion

Page({
  data: {
    array: [&#39;中国&#39;, &#39;美国&#39;, &#39;巴西&#39;, &#39;日本&#39;],
    index: 0,
    date: &#39;2016-09-01&#39;,
    time: &#39;12:01&#39;
  },
  bindPickerChange: function(e) {
    console.log(&#39;picker发送选择改变，携带值为&#39;, 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
    })
  }
})

Copier après la connexion

wxss

.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    overflow: hidden;
}
.page__hd{
    padding: 50rpx 50rpx 100rpx 50rpx;
    text-align: center;
}
.page__title{
    display: inline-block;
    padding: 20rpx 40rpx;
    font-size: 32rpx;
    color: #AAAAAA;
    border-bottom: 1px solid #CCCCCC;
}
.page__desc{
    display: none;
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #BBBBBB;
}
.picker{
  padding: 26rpx;
  background-color: #FFFFFF;
}
.section{
    margin-bottom: 80rpx;
}
.section__title{
    margin-bottom: 16rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
}

Copier après la connexion

Attributs principaux :

Sélection normale Sélecteur de date : (mode = heure)

Développement dapplets WeChat : introduction détaillée du sélecteur de défilement

Sélecteur d'heure : (mode = date)

Développement dapplets WeChat : introduction détaillée du sélecteur de défilement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn