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 中。
设置横向滚动：
- 给 scroll-view 添加 scroll-x="true" 属性。
- 给 scroll-view 添加 white-space:nowrap; 样式。
- 给 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;
}
设置竖向滚动：
- 给 scroll-view 添加 scroll-y="true" 属性。
- 给 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)
}
})
