微信小程序-组件

1.轮播图

<swiper indicator-dots="{{indicatorDots}}" indicator-color="{{indicatorColor}}"
  indicator-active-color="{{indicatorActiveColor}}" autoplay="{{autoplay}}" interval="{{interval}}"
  duration="{{duration}}" circular="{{circular}}">
  <block wx:key="item" wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" />
    </swiper-item>
  </block>
</swiper>

参数:
imgUrls:[],
indicatorDots: true,
indicatorColor: '#fff',
indicatorActiveColor: '#666',
autoplay: true,
interval: 5000,
duration: 500,
circular: true,

  

2.下拉选择

(1)输入框
<input type='text' bindchange='changInput' placeholder='邮政编码'></input>
(2)下拉选择时间
<picker bindchange="changInput" mode="date" value="{{postData.mail_time}}" start="2019-06-01" end="2020-09-01">
  <view class="picker">
    {{postData.mail_time}}
  </view>
</picker>
(3)下拉选择单项,range-key只能解析data下面一层
<picker bindchange="changInput" value="{{indexPerson}}" range="{{arrayPerson}}" range-key="zh_name">
  <view class="picker">
    {{arrayPerson[indexPerson]||'请选择人数'}}
  </view>
</picker>

当输入框变化时,方法changInput就了根据传过来的id来判断处理值
<script>
  changInput(e) {
    let id = e.currentTarget.dataset.id
    let value = e.detail.value
    if (id === 1) {
      this.setData({
        value: value
      })
    }
  }
</script>

  

猜你喜欢

转载自www.cnblogs.com/fm060/p/11014747.html