day05-微信小程序基础(常用组件)

view

视图容器。

属性名	类型	默认值	说明	最低版本
hover-class	String	none	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态	1.5.0
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	400	手指松开后点击态保留时间，单位毫秒
aria-role	String		无障碍访问，（角色）标识元素的作用	2.5.0
aria-label	String		无障碍访问，（属性）元素的额外描述	2.5.0

示例：

在开发者工具中预览效果

<view class="section">
  <view class="section__title">flex-direction: row</view>
  <view class="flex-wrp" style="flex-direction:row;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>
<view class="section">
  <view class="section__title">flex-direction: column</view>
  <view class="flex-wrp" style="height: 300px;flex-direction:column;">
    <view class="flex-item bc_green">1</view>
    <view class="flex-item bc_red">2</view>
    <view class="flex-item bc_blue">3</view>
  </view>
</view>

image.png
视图容器。相当于是传统网页中的 div ，可以用来存放任何的其他子元素。相关的属性请参
考：https://developers.weixin.qq.com/miniprogram/dev/component/view.html

---

scroll-view：

有时候我们的一些视图在手机指定的宽度和高度不够存放。那么可以放在 scroll-view 中。
设置横向滚动：

1. 给 scroll-view 添加 scroll-x="true" 属性。
2. 给 scroll-view 添加 white-space:nowrap; 样式。
3. 给 scroll-view 中的子元素设置为 display:inline-block; 。
   示例代码如下：
   index.wxml代码：

<scroll-view class='scroll-x-view' scroll-x>
<view class='scroll-view-item bg_red'></view>
<view class='scroll-view-item bg_blue'></view>
<view class='scroll-view-item bg_green'></view>
<view class='scroll-view-item bg_yellow'></view>
</scroll-view>

index.wxss代码：

.scroll-x-view{
width: 100%;
height: 100px;
background: gray;
white-space: nowrap;
}
.scroll-x-view .scroll-view-item{
width: 200px;
height: 100px;
}
.bg_red{
background: red;
}
.bg_blue{
background: blue;
}
.bg_green{
background: green;
}
.bg_yellow{
background: yellow;
}

设置竖向滚动：

1. 给 scroll-view 添加 scroll-y="true" 属性。
2. 给 scroll-view 设置高度。
   wxml 和 wxss 示例代码如下：

<scroll-view class='scroll-x-view' scroll-y>
<view class='scroll-view-item bg_red'></view>
<view class='scroll-view-item bg_blue'></view>
<view class='scroll-view-item bg_green'></view>
<view class='scroll-view-item bg_yellow'></view>
</scroll-view>
.scroll-x-view{
width: 100%;
height: 200px;
background: gray;
}
.scroll-x-view .scroll-view-item{
width: 100%;
height: 100px;
}
.bg_red{
background: red;
}
.bg_blue{
background: blue;
}
.bg_green{
background: green;
}
.bg_yellow{
background: yellow;
}

scrolltoupper和scrolltolower事件：

鼠标滚动到距离顶部或者左边、鼠标滚动到底部或者右边多少距离的时候会执行这个事件。默认的间隔是 50 像
素。示例代码如下：

<scroll-view class='scroll-x-view' scroll-y bindscrolltoupper="scrollToUpper">
<view style="height:1000px;">
</view>
</scroll-view>
Page({
scrollToUpper: function(event){
console.log(event);
}
});

bindscroll事件：
只要 scroll-view 发生了滚动，就会执行这个事件。

<scroll-view class='scroll-x-view' scroll-y bindscrolltoupper="scrollEvent">
<view style="height:1000px;">
</view>
</scroll-view>
Page({
scrollEvent: function(event){
console.log(event);
}
});

swiper组件

在 app 里面，轮播图（ banner ）是非常常见的，因此小程序专门针对这个出了一个组件就是 swiper 。

swiper组件基本用法：

swiper 就是一个包裹轮播图的容器，里面的子元素必须是 swiper-item 组件。 swiper 可以自动的轮播子元素，并且
天生就带有指示点，还可以使用手指左右滑动。下面用代码的方式来演示一下：

<swiper class='swiper' style='width:NaNrpx;height:NaNrpx;' autoplay indicator-dots indicator-color='blue' indicator-a
ctive-color='red'>
<swiper-item>
<image src='https://static-image.xfz.cn/1539770831_872.jpg'></image>
</swiper-item>
<swiper-item>
<image src='https://static-image.xfz.cn/1541147489_121.jpeg'></image>
</swiper-item>
</swiper>
.swiper image{
width: 100%;
height: 100%;
}
Page({
data:{},
onLoad: function (options) {
var systemInfo = wx.getSystemInfoSync();
var windowWidth = systemInfo.windowWidth;
var width = windowWidth;
var height = width/4;
// 根据图片的宽高比例设置swiper的宽高
this.setData({
width: width,
height: height
});
},
});

image.png

wiper

滑块视图容器。

属性名	类型	默认值	说明	最低版本
indicator-dots	Boolean	false	是否显示面板指示点
indicator-color	Color	rgba(0, 0, 0, .3)	指示点颜色	1.1.0
indicator-active-color	Color	#000000	当前选中的指示点颜色	1.1.0
autoplay	Boolean	false	是否自动切换
current	Number	0	当前所在滑块的 index
current-item-id	String	""	当前所在滑块的 item-id ，不能与 current 被同时指定	1.9.0
interval	Number	5000	自动切换时间间隔
duration	Number	500	滑动动画时长
circular	Boolean	false	是否采用衔接滑动
vertical	Boolean	false	滑动方向是否为纵向
previous-margin	String	"0px"	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	1.9.0
next-margin	String	"0px"	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	1.9.0
display-multiple-items	Number	1	同时显示的滑块数量	1.9.0
skip-hidden-item-layout	Boolean	false	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	1.9.0
bindchange	EventHandle		current 改变时会触发 change 事件，event.detail = {current: current, source: source}
bindtransition	EventHandle		swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}	2.4.3
bindanimationfinish	EventHandle		动画结束时会触发 animationfinish 事件，event.detail 同上	1.9.0

从 1.4.0 开始，change事件返回detail中包含一个source字段，表示导致变更的原因，可能值如下：

• autoplay 自动播放导致swiper变化；
• touch 用户划动引起swiper变化；
• 其他原因将用空字符串表示。

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

swiper-item

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

属性名	类型	默认值	说明	最低版本
item-id	String	""	该 swiper-item 的标识符	1.9.0

示例代码：

在开发者工具中预览效果

<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(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

movable-view

基础库 1.2.0 开始支持，低版本需做兼容处理。

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

属性名	类型	默认值	说明	最低版本
direction	String	none	movable-view的移动方向，属性值有all、vertical、horizontal、none
inertia	Boolean	false	movable-view是否带有惯性
out-of-bounds	Boolean	false	超过可移动区域后，movable-view是否还可以移动
x	Number / String		定义x轴方向的偏移，如果x的值不在可移动范围内，会自动移动到可移动范围；改变x的值会触发动画
y	Number / String		定义y轴方向的偏移，如果y的值不在可移动范围内，会自动移动到可移动范围；改变y的值会触发动画
damping	Number	20	阻尼系数，用于控制x或y改变时的动画和过界回弹的动画，值越大移动越快
friction	Number	2	摩擦系数，用于控制惯性滑动的动画，值越大摩擦力越大，滑动越快停止；必须大于0，否则会被设置成默认值
disabled	Boolean	false	是否禁用	1.9.90
scale	Boolean	false	是否支持双指缩放，默认缩放手势生效区域是在movable-view内	1.9.90
scale-min	Number	0.5	定义缩放倍数最小值	1.9.90
scale-max	Number	10	定义缩放倍数最大值	1.9.90
scale-value	Number	1	定义缩放倍数，取值范围为 0.5 - 10	1.9.90
animation	Boolean	true	是否使用动画	2.1.0
bindchange	EventHandle		拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}，其中source表示产生移动的原因，值可为touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData）	1.9.90
bindscale	EventHandle		缩放过程中触发的事件，event.detail = {x: x, y: y, scale: scale}，其中x和y字段在2.1.0之后开始支持返回	1.9.90

除了基本事件外，movable-view提供了两个特殊事件

类型	触发条件	最低版本
htouchmove	初次手指触摸后移动为横向的移动，如果catch此事件，则意味着touchmove事件也被catch	1.9.90
vtouchmove	初次手指触摸后移动为纵向的移动，如果catch此事件，则意味着touchmove事件也被catch	1.9.90

movable-view 必须设置width和height属性，不设置默认为10px

movable-view 默认为绝对定位，top和left属性为0px

注意：movable-view必须在<movable-area/>组件中，并且必须是直接子节点，否则不能移动。

movable-area

基础库 1.2.0 开始支持，低版本需做兼容处理。

movable-view 的可移动区域

属性名	类型	默认值	说明	最低版本
scale-area	Boolean	false	当里面的movable-view设置为支持双指缩放时，设置此值可将缩放手势生效区域修改为整个movable-area	1.9.90

注意：movable-area 必须设置width和height属性，不设置默认为10px

当movable-view小于movable-area时，movable-view的移动范围是在movable-area内；

当movable-view大于movable-area时，movable-view的移动范围必须包含movable-area（x轴方向和y轴方向分开考虑）

示例代码：

在开发者工具中预览效果

<view class="section">
  <view class="section__title">movable-view区域小于movable-area</view>
  <movable-area style="height: 200px; width: 200px; background: red;">
    <movable-view
      style="height: 50px; width: 50px; background: blue;"
      x="{{x}}"
      y="{{y}}"
      direction="all"
    ></movable-view>
  </movable-area>
  <view class="btn-area">
    <button size="mini" bindtap="tap">click me to move to (30px, 30px)</button>
  </view>
  <view class="section__title">movable-view区域大于movable-area</view>
  <movable-area style="height: 100px; width: 100px; background: red;">
    <movable-view
      style="height: 200px; width: 200px; background: blue;"
      direction="all"
    ></movable-view>
  </movable-area>
  <view class="section__title">可放缩</view>
  <movable-area
    style="height: 200px; width: 200px; background: red;"
    scale-area
  >
    <movable-view
      style="height: 50px; width: 50px; background: blue;"
      direction="all"
      bindchange="onChange"
      bindscale="onScale"
      scale
      scale-min="0.5"
      scale-max="4"
      scale-value="2"
    ></movable-view>
  </movable-area>
</view>

Page({
  data: {
    x: 0,
    y: 0
  },
  tap(e) {
    this.setData({
      x: 30,
      y: 30
    })
  },
  onChange(e) {
    console.log(e.detail)
  },
  onScale(e) {
    console.log(e.detail)
  }
})