常用属性简介
属性名 | 类型 | 默认值 | 简介 |
---|---|---|---|
scroll-x | Boolean | false | 允许横向滚动 |
scroll-y | Boolean | false | 允许纵向滚动 |
scroll-top | Number | 设置竖向滚动条位置 | |
scroll-left | Number | 设置横向滚动条位置 | |
scroll-with-animation | Boolean | false | 在设置滚动条位置时使用动画过渡 |
bindscrolltoupper | EventHandle | 滚动到顶部/左边,会触发 scrolltoupper 事件 | |
bindscrolltolower | EventHandle | 滚动到底部/右边,会触发 scrolltolower 事件 |
简单易懂的使用方式
这里是uniapp项目 移动端的区域滚动示例
<!--滚动-->
<scroll-view
:scroll-y="true"
class="dataScroll"
:scroll-top="scrollTop"
@scroll="scroll"
@scrolltolower="loadMore()">
<!--数据展示-->
<view class="dataShow">
</view>
</scroll-view>
js
<script>
export default {
name:'index',
data() {
return {
scrollTop: 0, // 切换是文章列表滚动到顶部
old: {
scrollTop: 0,
},
}
},
methods: {
// 监听内容滚动
scroll: function (e) {
this.old.scrollTop = e.detail.scrollTop; // 必要
if (e.detail.scrollTop < 0) {
uni.pageScrollTo({
scrollTop: 0,
duration: 100,
});
}
},
//触底函数 没有实际操作
loadMore(){
},
}
}
</script>
内容超过外层scroll的高度就会出现滚动
<style lang="scss" scoped>
.dataScroll{
width:100%;
height:500rpx;
box-sizing: border-box;
.dataShow{
width:100%;
height:600rpx;
}
}
</style>
其他参数详情 请参考文档
scroll-view(点击跳转)