小程序学习之视图组件和基础组件

 

什么是组件？

• 组件是视图层的基本组成单元。
• 组件自带一些功能与微信风格一致的样式。
• 多个组件构成一张试图页面
• 每个组件都包含一些公用属性（class、id、style...）
• 一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。

一、基础组件分为以下七大类：

1、视图组件

  1.1、view

  view组件的常用属性：

• hover-class：指定按下去的样式类
• hover-start-time：按住后多久出现点击态，单位毫秒
• hover-stay-time：手指松开后点击态保留时间，单位毫秒

<view hover-class='d' hover-start-time='10' hover-stay-time='2000'>内容</view>

1.2、scroll-view（可滚动视图区域）

• scroll-view组件的常用属性：
• scroll-view：允许纵向滚动（true / false）
• scroll-top：设置竖向滚动条位置（Number）
• scroll-with-animation：在设置滚动条位置时使用动画过渡（true / false）
• enable-back-to-top：iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向（得在真机上使用）（true / false）
• upper-threshold：距顶部/左边多远时（单位px），触发 scrolltoupper 事件，默认值是50px
• lower-threshold：距底部/右边多远时（单位px），触发 scrolltolower 事件，默认值是50px
• scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素（id名）
• bindscrolltoupper：滚动到顶部/左边，会触发 scrolltoupper 事件（scrolltoupper）
• bindscrolltolower：滚动到底部/右边，会触发 scrolltolower 事件（scrolltolower ）
• bindscroll：滚动时触发
•  
• 竖向可滚动区域

  <scroll-view scroll-y="true" scroll-top="50" scroll-with-animation="true" bindscrolltoupper="scrolltoupper" bindscrolltolower="scrolltolower" upper-threshold="0" lower-threshold="0" enable-back-to-top="true" scroll-into-view = 'c' enable-back-to-top='true' bindscroll="scroll">
    <view id='a' class='a size'>a</view>
    <view id='b' class='b size'>b</view>
    <view id='c' class='c size'>c</view>
    <view id='d' class='d size'>d</view>
    <view id='e' class='e size'>e</view>
  </scroll-view>

  横向可滚动区域

  <scroll-view class='container' scroll-x="true" style='margin-top:250rpx;'  scroll-left='350'>
    <view id='a' class='a size'>a</view>
    <view id='b' class='b size'>b</view>
    <view id='c' class='c size'>c</view>
    <view id='d' class='d size'>d</view>
    <view id='e' class='e size'>e</view>
  </scroll-view>

  横向scroll-view需要在样式里设置：white-space: nowrap;和display: inline-block;

 1.3、swiper（滑块视图容器）

实现跟轮播图一样的效果

swiper组件的常用属性：

• indicator-dots：是否显示面板指示点（默认false）
• indicator-color：指示点颜色（默认rgba(0, 0, 0, .3)）
• autoplay：是否自动切换（默认false）
• duration：滑动动画时长（默认500毫秒）
• interval：自动切换时间间隔

注意：swiper里只可放置<swiper-item/>组件，否则会导致未定义的行为。

swiper-item

仅可放置在<swiper/>组件中，宽高自动设置为100%。

swipter-item属性：item-id 

<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"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  },
  changeIndicatorDots: function (e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function (e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function (e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function (e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

 1.3、movable-area和movable-view

movable-area：mova-view的可以的区域

movable-view：可移动的视图容器，在页面中可以拖拽滑动

movable-view的常用属性：

• direction：movable-view的移动方向，属性值有all、vertical、horizontal、none
• inertia：movable-view是否带有惯性（false / true）
• out-of-bounds：超过可移动区域后，movable-view是否还可以移动（false / true）
• x：定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
• y：同 x
• damping：阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快（默认值是20）
• friction：摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值（默认值是2）
• bindchange：拖动过程中触发的事件
• scale：是否支持双指缩放，默认缩放手势生效区域是在movable-view内
• bindscale：缩放过程中触发的事件

<movable-area class='father-size'>

  <movable-view class='size d' direction='all' inertia='false' out-of-bounds='false' x='50' y='100' damping='20' friction='2' bindchange='change' scale='true' bindscale='scale'>
  </movable-view>

</movable-area>

Page({
  data:{
  },
  change:function(){
    // console.log('我被移动了...')
  },
  scale:function(){
    console.log('我被缩放了...')
  }

})

 

2、基础组件（内容）

2.1、icon（图标）

icon的属性：

• type：icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
• size：icon的大小，单位px（默认值是23，注意不用写单位）
• color：icon的颜色，同css的color

示例：

<icon type='success' size='66'></icon>
<icon type='success_no_circle' size='66'></icon>
<icon type='info' size='66'></icon>
<icon type='warn' size='66'></icon>
<icon type='waiting' size='66'></icon>
<icon type='cancel' size='66'></icon>
<icon type='download' size='66'></icon>
<icon type='search' size='66'></icon>
<icon type='clear' size='66'></icon>

<view class='group'>
  <block wx:for='{{iconsize}}'>
    <icon type='success' size='{{item}}'></icon>
  </block>
</view>

<view class='group'>
  <block wx:for='{{icontype}}'>
    <icon type='{{item}}' size='30'></icon>
  </block>
</view>

<view class='group'>
  <block wx:for='{{iconcolor}}'>
    <icon type='success' size='30' color='{{item}}'></icon>
  </block>
</view>

js代码：

Page({
  data:{
    iconsize:[20,30,40,50,60,70],
    icontype: ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search','clear'],
    iconcolor:['red','green','blue','yellow','grey','pink','purple']
  },
  
})

2.2、text（文本）

属性：

selectable：文本是否可选（默认false）

space：显示连续空格（这个属性最后显示出来的是一个空格，与属性说明有出入）

decode：是否解码（可以解析的有 &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp; ，将其显示为' ' , '<' ,'>' , ’&' , ' ‘ '’）

2.3、rich-text（富文本）

属性：

属性	类型	默认值	说明	最低版本
nodes	Array / String	[]	节点列表 / HTML String	1.4.0

nodes 属性推荐使用 Array 类型，由于组件会将 String 类型转换为 Array 类型，因而性能会有所下降

nodes

现支持两种节点，通过type来区分，分别是元素节点和文本节点，默认是元素节点，在富文本区域里显示的HTML节点

元素节点：type = node

属性	说明	类型	必填	备注
name	标签名	String	是	支持部分受信任的HTML节点
attrs	属性	Object	否	支持部分受信任的属性，遵循Pascal命名法
children	子节点列表	Array	否	结构和nodes一致

示例：

wxml代码

<rich-text nodes='{{mycontent}}'></rich-text>
<rich-text nodes='{{mycontent2}}'></rich-text>

js代码

Page({
  data:{
    mycontent:'<img width="300" height="90" src="//img-ads.youkuaiyun.com/2018/201809111436174642.png">',
    mycontent2:[{
      name:'img',
      attrs:{
        width: '300',
        height: '90',
        src: '//img-ads.youkuaiyun.com/2018/201809111436174642.png'
      },
      
    }]
  },
  
})

mycontent和mycontent2使用两种形式来绑定内容

2.4、progress（进度条）

属性名	类型	默认值	说明	最低版本
percent	Float	无	百分比0~100
show-info	Boolean	false	在进度条右侧显示百分比
stroke-width	Number	6	进度条线的宽度，单位px
color	Color	#09BB07	进度条颜色 （请使用 activeColor）
activeColor	Color		已选择的进度条的颜色
backgroundColor	Color		未选择的进度条的颜色
active	Boolean	false	进度条从左往右的动画
active-mode	String	backwards	backwards: 动画从头播；forwards：动画从上次结束点接着播

<progress percent='35' show-info='{{true}}' stroke-width='20' activeColor='yellow' backgroundColor='grey'></progress>

<progress percent='{{mypercent}}' show-info='{{true}}' stroke-width='20' activeColor='red' backgroundColor='grey' active='true' active-mode='forwards'></progress>
<view bindtap='addProgress'>点击</view>

Page({
  data:{
    mypercent: 35,
  },
  
  addProgress:function(){
    var newPercent = this.data.mypercent+20;
    this.setData({
      mypercent: newPercent,
    })
  }