微信小程序（六）

scroll-view

常用的属性bindscrolltoupper和bindscrolltolower，这两个属性是指当滚动到距离顶部或底部一定距离时触发事件，距离由lower-threshold和upper-threshold确定。可以用于分页加载数据。
其他属性enable-back-to-top=‘true’，是指安卓或ios中点击小程序标题栏时，自动列表滚动到顶部。
scroll-with-animation=‘true’设置滚动的动画效果
scroll-top='200rpx'指定一开始滚动条的位置
bindscroll绑定滚动事件，一绑定就触发事件

<scroll-view scroll-y='true' style='height:300rpx'
upper-threshold='0' lower-threshold='0' bindscrolltoupper='scrolltoupper'
bindscrolltolower='scrolltolower'>
   <view class='a size'>a</view>
   <view class='b size'>b</view>

   <view class='c size'>c</view>

   <view class='d size'>d</view>

   <view class='e size'>e</view>

</scroll-view>

swiper

重要的几个属性
indicator-dots=‘true’显示面板指示点
autoplay=“true"自动播放
interval=”{{interval}}“自动播放的滚动间隔
duration=”{{duration}}"滚动的时常

swiper-item是每个swiper的标签，通过for循环引入图片url
slider是滑块进度条，可以绑定change事件和显示滑块的值

<swiper
  indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}"
  interval="{{interval}}"
  duration="{{duration}}"
>
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150" />
    </swiper-item>
  </block>
</swiper>
<button bindtap="changeIndicatorDots">indicator-dots</button>
<button bindtap="changeAutoplay">autoplay</button>
<slider bindchange="intervalChange" show-value min="500" max="2000" />

movable-area

可拖放区域，movable-view可以在area中拖放。

icon

type有success, success_no_circle, info, warn, waiting, cancel, download, search, clear
size可以更换图标大小，color换颜色

<icon type='clear' size='50px' color='red'></icon>

text

selectable可以选中文本，除了文本节点以外的其他节点都无法长按选中。
decode可以解析的有   < > & '    

<text selectable='true'>后哈哈哈后哈哈哈哈哈哈哈哈哈哈哈哈</text>
<text selectable='true' decode='true'>&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;</text>

rich-text

可以使用string，不过性能会下降，使用数组方式就是下面的第二种形式。

<rich-text nodes="<div style='line-height: 60px; color: red;'>helloworld</div>" bindtap="tap"></rich-text>

<rich-text nodes="{{nodes}}" bindtap="tap"></rich-text>
//js
data: {
    nodes: [{
      name: 'div',
      attrs: {
        class: 'div_class',
        style: 'line-height: 60px; color: red;'
      },
      children: [{
        type: 'text',
        text: 'Hello&nbsp;World!'
      }]
    }]
  },

progresss

重要属性有
persent显示百分比
show-info显示百分比数字
active表示当persent变化时，是有一个增长动画的，而不是一下子就变到那个百分比
active-mode表示当persent变化时，动画是从0开始增长到新的百分比还是从原先的百分比开始增长

<progress percent="20" show-info='true' border-radius='50rpx'  activeColor='red' backgroundColor='black'
active='true' active-mode='forwards'/>