微信小程序_常用组件scroll-into-view String 值应为某子元素id（id不能以数字开头）。设置哪个方

百分比

show-info: 在进度条右侧显示百分比默认false
active 进度条动画boolean
color: 进度条颜色
stroke-width: 进度条宽度(px)

<progress  stroke-width="10" color="red" percent="40" active show-info></progress>

轮播图

circular: 循环轮播《不会从头开始》 circular='{{true}}'
indicator-dots：指示器
interval：间隔时间
autoplay：自动轮播
verrical: 向上轮播

<swiper vertical='{{true}}' circular='{{true}}'  indicator-dots='{{true}}' autoplay='{{true}}' interval="2000" class="sw">
  <swiper-item class="sw-item">
      <image class="img" src="/images/GI_index_1.png"></image>
  </swiper-item>
  <swiper-item>
      <image class="img"  src="/images/GI_index_2.png"></image>
  </swiper-item>
  <swiper-item>
      <image class="img"  src="/images/GI_index_3.png"></image>
  </swiper-item>
  <swiper-item>
      <image class="img"  src="/images/GI_index_4.png"></image>
  </swiper-item>
</swiper>

picker

bindchange: 滑动结束时触发
mode 类型
start end: 显示可选择时间范围
value: 选中值

<picker mode="time" start="10:00" end="18:00" value="{{date}} " bindchange='timeEvnt'>
   <view>你选择的时间{{date}}</view> 
</picker>
 
<picker mode="date" start="2014-03-11" end="2019-4-12" value="{{date}}" bindchange='timeEvnt'>
 <view>你选择的日期{{date}}</view> 
</picker>

<picker range="{{array}}" bindchange='selector'>
  <view>你的选择是{{val}}</view>
</picker>

<!--选出内容是索引的集合  -->
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" bindchange="picks">
    <picker-view-column style="line-height: 50px">
        <view wx:for="{{foods}}">{{item}}</view>
    </picker-view-column>
     <picker-view-column style="line-height: 50px" >
         <view wx:for="{{drinks}}">{{item}}</view>
     </picker-view-column>     
</picker-view>
 <view>你选择 : {{str}}</view> 
 
 data:{
    date:"14:00",
    time:'2016-12-01',
    array:["吃","喝","玩"],
    val:'',
    foods:['面包','馒头','米饭'],
    drinks:['可乐','水']
  },
  timeEvnt(e){
    this.setData({
      time:e.detail.value
    })
  },
  selector(e){
    this.setData({
      val:this.data.array[e.detail.value]
    })
     
  },
  picks(e){
      console.log(e.detail.value)
  },

animation

    <view class="box" animation="{{animate}}"></view>
    
   // 页面初始化 options 为页面跳转所带来的参数
    var animate = wx.createAnimation({
      // 动画持续时间.ms
      duration: 2000,
      // 定义动画效果
      timingFunction: 'linear',
      // 动画延迟时间 ms
      delay: 0,
      // 中心点
      transformOrigin: '50% 50% 0'
    })
    /*
      skew: 倾斜
      roate: 旋转
      scale: 缩放
      translate: 偏移
    */
    animate.skew(40).rotate(60).step();
    animate.translate(200, 200).step();
    this.setData({
      animate
    })

滚动组件

scroll-x Boolean false 允许横向滚动
scroll-y Boolean false 允许纵向滚动
upper-threshold Number 50 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
lower-threshold Number 50 距底部/右边多远时（单位px），触发 scrolltolower 事件
scroll-top Number 设置竖向滚动条位置
scroll-left Number 设置横向滚动条位置
scroll-into-view String 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡
enable-back-to-top Boolean false iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向
bindscrolltoupper EventHandle 滚动到顶部/左边，会触发 scrolltoupper 事件
bindscrolltolower EventHandle 滚动到底部/右边，会触发 scrolltolower 事件
bindscroll EventHandle 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

<scroll-view scroll-y="{{true}}" class="scroll-view">
  <block wx:for="{{listData}}" wx:key="property" >
    <view class="list-container">
      <view class="list-left">
        <text>{{item.title}}</text> 
          <image src="{{item.icon}}"></image>  
      </view>
      <view class="list-right">
        <text>{{item.hand}}</text>
        <text class="describle">{{item.describlxiao'cjheng'xue}}</text>
      </view>
    </view>
  </block>
</scroll-view>