view
视图容器
属性说明
属性 | 类型 | 默认值 | 必填 | 说明 | 备注 |
---|---|---|---|---|---|
hover-class | string | none | 否 | 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果 | |
hover-start-time | number | 50 | 否 | 按住后多久出现点击态,单位毫秒 | |
hover-stay-time | number | 400 | 否 | 手指松开后点击态保留时间,单位毫秒 |
示例代码
TYML
<view class="page-head">
<view class="page-head-title">view</view>
<view class="page-head-line"></view>
</view>
<view class="page-section">
<view class="page-section-title l-r-padding">
<view>flex-direction: row</view>
<view>横向布局</view>
</view>
<view class="flex-wrp" style="flex-direction:row;justify-content: center;">
<view class="flex-item demo-text-1">A</view>
<view class="flex-item demo-text-2">B</view>
<view class="flex-item demo-text-3">C</view>
</view>
</view>
<view class="page-section">
<view class="page-section-title l-r-padding">
<view>flex-direction: column</view>
<view>纵向布局</view>
</view>
<view class="flex-wrp" style="flex-direction:column;">
<view class="flex-item flex-item-V demo-text-1">A</view>
<view class="flex-item flex-item-V demo-text-2">B</view>
<view class="flex-item flex-item-V demo-text-3">C</view>
</view>
</view>
scroll-view
可滚动视图区域,可实现横向滚动和竖向滚动。使用竖向滚动时,需要给定一个固定高度,可以通过样式来设置 height。组件属性的长度单位支持 px 和 rpx。
属性说明
属性 | 类型 | 默认值 | 必填 | 说明 | 备注 |
---|---|---|---|---|---|
scroll-x | boolean | false | 否 | 允许横向滚动 | |
scroll-y | boolean | false | 否 | 允许纵向滚动 | |
upper-threshold | number/string | 50 | 否 | 距顶部/左边多远时,触发 scrolltoupper 事件 | |
lower-threshold | number/string | 50 | 否 | 距底部/右边多远时,触发 scrolltolower 事件 | |
scroll-top | number/string | 否 | 设置竖向滚动条位置 | ||
scroll-left | number/string | 否 | 设置横向滚动条位置 | ||
scroll-into-view | string | 否 | 值应为某子元素 id(id 不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素 | ||
scroll-with-animation | boolean | false | 否 | 在设置滚动条位置时使用动画过渡 | |
refresher-enabled | boolean | false | 否 | 开启自定义下拉刷新 | |
refresher-threshold | number | 45 | 否 | 设置自定义下拉刷新阈值 | |
refresher-default-style | string | "black" | 否 | 设置自定义下拉刷新默认样式,支持设置 black、white、none, none 表示不使用默认样式 | |
refresher-background | string | "#FFF" | 否 | 设置自定义下拉刷新区域背景颜色 | |
refresher-triggered | boolean | false | 否 | 设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发 | |
bind:scroll | eventhandle | -- | 否 | 滚动时触 | |
bind:scrolltoupper | eventhandle | -- | 否 | 滚动到顶部/左边时触发 | |
bind:scrolltolower | eventhandle | -- | 否 | 滚动到底部/右边时触发 | |
bind:refresherpulling | eventhandle | -- | 否 | 自定义下拉刷新控件被下拉 | |
bind:refresherrefresh | eventhandle | -- | 否 | 自定义下拉刷新被触发 | |
bind:refresherrestore | eventhandle | -- | 否 | 自定义下拉刷新被复位 | |
bind:refresherabort | eventhandle | -- | 否 | 自定义下拉刷新被中止 |
👉 立即免费领取开发资源,体验涂鸦 MiniApp 小程序开发。
示例代码
TYML
<view class="page-head">
<view class="page-head-title">scroll-view</view>
<view class="page-head-line"></view>
</view>
<view class="page-section">
<view class="page-section-title l-r-padding">
<text>Vertical Scroll</text>
<view>纵向滚动</view>
</view>
<view class="page-section-spacing">
<scroll-view
style="height: 150px;"
scrollY="{{true}}"
bind:scroll="scroll"
bind:scrolltoupper="upper"
bind:scrolltolower="lower"
>
<view id="demo1" class="scroll-view-item demo-text-1">A</view>
<view id="demo2" class="scroll-view-item demo-text-2">B</view>
<view id="demo3" class="scroll-view-item demo-text-3">C</view>
</scroll-view>
</view>
</view>
<view class="page-section">
<view class="page-section-title l-r-padding">
<text>Horizontal Scroll</text>
<view>横向滚</view>
</view>
<view class="page-section-spacing">
<scroll-view
class="scroll-view_H"
scrollX="{{true}}"
scrollIntoView="{{toView}}"
scrollWithAnimation="{{true}}"
bind:scroll="scroll"
bind:scrolltoupper="upper"
bind:scrolltolower="lower"
>
<view class="box">
<view id="demo4" class="scroll-view-item_H demo-text-1">A</view>
<view id="demo5" class="scroll-view-item_H demo-text-2">B</view>
<view id="demo6" class="scroll-view-item_H demo-text-3">C</view>
</view>
</scroll-view>
</view>
</view>
JS
Page({
data: {
toView: 'demo5',
},
upper(e) {
console.log('demo upper', e);
},
lower(e) {
console.log('demo lower', e);
},
scroll(e) {
console.log('demo scroll', e);
},
});
TYSS
.page-section {
width: 100%;
display: block;
margin: 30px 0;
}
.page-section:last-child {
margin-bottom: 0;
}
.page-section-spacing {
margin-top: 30px;
box-sizing: border-box;
padding: 0 40px;
}
.scroll-view_H {
width: 100%;
white-space: nowrap;
}
.box {
display: flex;
flex-wrap: nowrap;
width: 300%;
}
.scroll-view-item_H {
flex: 1;
height: 150px;
color: #ffffff;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
}
.scroll-view-item {
height: 150px;
color: #ffffff;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
}
.demo-text-1 {
background-color: #1aad19;
}
.demo-text-2 {
background-color: #2782d7;
}
.demo-text-3 {
background-color: #f1f1f1;
color: #353535;
}
常见问题(FAQ)
为何 scroll-view 在 popup 扩展组件中无法滑动?
popup 组件上加上 disableScroll={{false}} 属性才能滑动。
如何监听 scroll-view 滚动到底部?
可以直接在 onScroll
方法中进行处理,使用 onScrollToLower
监听 scroll-view
的滚动高度来进行判断是否滑动到了底部。 scrollHeight
是 scroll-view
里面所有 view
的高度和,scrollTop
是滚动的值。
自定义页面蒙层的时候,当滚动蒙层里面的内容,蒙层底下页面也能跟着滑动?
可以给蒙层内部 scroll-view
或 view
添加 catch:touchmove
事件,阻止事件冒泡。
👉 立即免费领取开发资源,体验涂鸦 MiniApp 小程序开发。