<scroll-view>
一个固定高度,通过 WXSS 设置 height。属性 | 类型 | 默认值 | 说明 |
scroll-x | boolean | false | 允许横向滚动 |
scroll-y | boolean | false | 允许纵向滚动 |
upper-threshold | number/string | 50 | 距顶部/左边多远时,触发 scrolltoupper |
lower-threshold | number/tring | 50 | 距底部/右边多远时,触发 scrolltolower 事件 |
scroll-top | number/string | - | 设置竖向滚动条位置 |
scroll-left | number/string | - | 设置横向滚动条位置 |
scroll-into-view | string | - | 值应为某子元素 id(id 不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 |
scroll-with-animation | boolean | false | 在设置滚动条位置时使用动画过渡 |
enable-back-to-top | boolean | false | iOS 单击顶部状态栏、Android 双击标题栏时,滚动条返回顶部,只支持竖向 |
bindscrolltoupper | eventhandle | - | 滚动到顶部/左边时触发 |
bindscrolltolower | eventhandle | - | 滚动到底部/右边时触发 |
bindscroll | eventhandle | - | 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} |
aria-label | string | false | - |
enhanced | boolean | true | - |
bounces | boolean | true | - |
show-scrollbar | boolean | false | - |
paging-enabled | boolean | false | - |
fast-deceleration | boolean | false | - |
<view class="section"><view class="section__title">vertical scroll</view><view class="section__title">纵向滚动</view><scroll-viewscroll-ystyle="height: 200px;"bindscrolltoupper="upper"bindscrolltolower="lower"bindscroll="scroll"scroll-into-view="{{toView}}"scroll-top="{{scrollTop}}"><view id="green" class="scroll-view-item bc_cyanblue">A</view><view id="red" class="scroll-view-item bc_blue">B</view></scroll-view></view><view class="section section_gap"><view class="section__title">horizontal scroll</view><view class="section__title">横向滚动</view><scroll-view class="scroll-view_H" scroll-x style="width: 100%"><view id="green" class="scroll-view-item_H bc_cyanblue"></view><view id="red" class="scroll-view-item_H bc_blue"></view></scroll-view></view>
const order = ['red', 'yellow', 'blue', 'green', 'red']Page({data: {toView: 'red',scrollTop: 100},upper(e) {console.log(e)},lower(e) {console.log(e)},scroll(e) {console.log(e)},tap(e) {for (let i = 0; i < order.length; ++i) {if (order[i] === this.data.toView) {this.setData({toView: order[i + 1]})break}}},tapMove(e) {this.setData({scrollTop: this.data.scrollTop + 10})}})
change
事件返回detail
中包含一个source
字段,表示导致变更的原因,可能值如下:autoplay
自动播放导致 swiper 变化;touch
用户滑动引起 swiper 变化;<swiper-item/>
组件,否则会导致未定义的行为。属性 | 类型 | 默认值 | 说明 |
indicator-dots | boolean | false | 是否显示面板指示点 |
indicator-color | color | rgba(0, 0, 0, .3) | 指示点颜色 |
indicator-active-color | color | #000000 | 当前选中的指示点颜色 |
autoplay | coolean | false | 是否自动切换 |
current | number | 0 | 当前所在滑块的 index |
interval | number | 5000 | 自动切换时间间隔 |
duration | number | 500 | 滑动动画时长 |
circular | boolean | false | 是否采用衔接滑动 |
vertical | boolean | false | 滑动方向是否为纵向 |
previous-margin | string | "0px" | 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 |
next-margin | string | "0px" | 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 |
display-multiple-items | number | 1 | 同时显示的滑块数量 |
skip-hidden-item-layout | boolean | false | 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失隐藏状态滑块的布局信息 |
bindchange | eventhandle | - | current 改变时会触发 change 事件,event.detail = {current: current, source: source} |
bindtransition | eventhandle | - | swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy} |
bindanimationfinish | eventhandle | - | 动画结束时会触发 animationfinish 事件,event.detail 同上 |
<swiper>
组件中,宽高自动设置为100%。属性名 | 类型 | 默认值 | 说明 |
item-id | string | “” | 该 swiper-item 的标识符 |
<swiperindicator-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: ['https://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg','https://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg','https://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})}})
属性名 | 类型 | 默认值 | 说明 |
hover-class | string | none | 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果 |
hover-stop-propagation | boolean | false | 指定是否阻止本节点的祖先节点出现点击态 |
hover-start-time | number | 50 | 按住后多久出现点击态,单位毫秒 |
hover-start-time | number | 400 | 手指松开后点击态保留时间,单位毫秒 |
aria-role | string | - | 无障碍访问,(角色)标识元素的作用 |
aria-label | string | - | 无障碍访问,(属性)元素的额外描述 |
<view class="section"><view class="section__title">flex-direction: row</view><view class="flex-wrp" style="flex-direction:row;"><view class="flex-item bc_cyanblue">A</view><view class="flex-item bc_blue">B</view><view class="flex-item bc_grey">C</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_cyanblue">A</view><view class="flex-item bc_blue">B</view><view class="flex-item bc_grey">C</view></view></view>
属性名 | 类型 | 默认值 | 说明 |
scale-area | boolean | false | 当里面的 movable-view 设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个movable-area。 |
<view class="section"><view class="section__title">movable-view区域小于movable-area</view><movable-area style="height: 200px; width: 200px; background: red;"><movable-viewstyle="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-viewstyle="height: 200px; width: 200px; background: blue;"direction="all"></movable-view></movable-area><view class="section__title">可放缩</view><movable-areastyle="height: 200px; width: 200px; background: red;"scale-area><movable-viewstyle="height: 50px; width: 50px; background: blue;"direction="all"bindchange="onChange"bindscale="onScale"scalescale-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)}})
属性名 | 类型 | 默认值 | 说明 |
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 | 是否禁用 |
scale | boolean | false | 是否支持双指缩放,默认缩放手势生效区域是在 movable-view 内 |
scale-min | number | 0.5 | 定义缩放倍数最小值 |
scale-max | number | 10 | 定义缩放倍数最大值 |
scale-value | number | 1 | 定义缩放倍数,取值范围为0.5 - 10 |
animation | boolean | true | 定义缩放倍数,取值范围为0.5 - 10 |
bindchange | eventhandle | - | 拖动过程中触发的事件,event.detail = {x: x, y: y, source: source},其中 source 表示产生移动的原因,值可为 touch(拖动)、touch-out-of-bounds(超出移动范围)、out-of-bounds(超出移动范围后的回弹)、friction(惯性)和空字符串(setData) |
bindscale | eventhandle | - | 缩放过程中触发的事件,event.detail = {x: x, y: y, scale: scale} |
类型 | 触发条件 |
htouchmove | 初次手指触摸后移动为横向的移动,如果 catch 此事件,则意味着 touchmove 事件也被 catch |
vtouchmove | 初次手指触摸后移动为纵向的移动,如果 catch 此事件,则意味着 touchmove 事件也被 catch |
属性名 | 类型 | 默认值 | 说明 |
src | string | - | 图标路径,支持临时路径、网络地址、云文件 ID。暂不支持 base64 格式 |
bindload | eventhandle | - | 图片加载失败时触发 |
binderror | eventhandle | - | 图片加载失败时触发 |
aria-role | string | - | 无障碍访问,(角色)标识元素的作用 |
aria-lable | string | - | 无障碍访问,(角色)标识元素的作用 |
<videoid="myVideo"src="https://qzonestyle.gtimg.cn/qzone/qzact/act/external/qq-video/qq-video.mp4"controls="{{false}}"event-model="bubble"><cover-view class="controls"><cover-view class="play" bindtap="play"><cover-image class="img" src="/path/to/icon_play" /></cover-view><cover-view class="pause" bindtap="pause"><cover-image class="img" src="/path/to/icon_pause" /></cover-view><cover-view class="time">00:00</cover-view></cover-view></video>
.controls {position: relative;top: 50%;height: 50px;margin-top: -25px;display: flex;}.play,.pause,.time {flex: 1;height: 100%;}.time {text-align: center;background-color: rgba(0, 0, 0, 0.5);color: white;line-height: 50px;}.img {width: 40px;height: 40px;margin: 5px auto;}
Page({onReady() {this.videoCtx = wx.createVideoContext('myVideo')},play() {this.videoCtx.play()},pause() {this.videoCtx.pause()}})
map
、video
、canvas
、camera
、live-player
、live-pusher
,只支持嵌套cover-view
、cover-image
,可在cover-view
中使用button
。属性名 | 类型 | 默认值 | 说明 |
scroll-top | number / string | - | 设置顶部滚动偏移量,仅在设置了 overflow-y: scroll 成为滚动元素后生效 |
aria-role | string | - | 无障碍访问,(角色)标识元素的作用 |
aria-label | string | - | 无障碍访问,(属性)元素的额外描述 |
本页内容是否解决了您的问题?