uniapp上拉加载(超详细)
比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。(2)如使用scroll-view导致页面没有滚动,则触底事件不会被触发。(1)使用注意 可在pages.json里定义具体页面底部的触发距离。onReachBottom()页面的生命周期。
·
目录
一.onReachBottom()------页面滚动到底部的事件
二.Scroll-view-------@scrolltolower---------滚动到底部/右边,会触发 scrolltolower 事件
1.onReachBottom()页面的生命周期
(1)使用注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance,比如设为50,那么滚动页面到距离底部50px时,就会触发onReachBottom事件。
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期 |
具体使用请看: http://t.csdn.cn/a6Kvf
(2)如使用scroll-view导致页面没有滚动,则触底事件不会被触发。
(3)代码演示
<template>
<view class="box">
<view v-for="(item,index) in arr" :key="index">
{{item}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
arr:[]
}
},
onLoad() {
for (let i = 0; i < 100; i++) {
this.arr.push(i)
}
},
methods(){
},
onReachBottom() {
console.log("触底了")
for (let i = 0; i < 20; i++) {
this.arr.push(i)
}
}
}
</script>
<style>
.box{
width: 100%;
height: 2000rpx;
text-align: center;
}
</style>
二.Scroll-view-------@scrolltolower---------滚动到底部/右边,会触发 scrolltolower 事件
(1)相关属性
(2)代码展示
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
Vertical Scroll
<text>\n纵向滚动</text>
</view>
<view>
<scroll-view
:scroll-top="scrollTop"
scroll-y="true"
class="scroll-Y"
@scroll="scroll"
@scrolltolower="lower">
<view v-for="(item,index) in arr" :key="index">
{{item}}
</view>
</scroll-view>
</view>
<view @tap="goTop" class="uni-link uni-center uni-common-mt">
点击这里返回顶部
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
scrollTop: 0,
old: {
scrollTop: 0
},
arr:[]
}
},
onLoad() {
for (var i = 0; i < 100 ; i++) {
this.arr.push(i)
}
},
methods: {
lower: function(e){
console.log("触底了")
for (var i = 1; i < 20 ; i++) {
this.arr.push(i)
}
},
scroll: function(e) {
// console.log(e)
// this.old.scrollTop = e.detail.scrollTop
},
goTop: function(e) {
// 解决view层不同步的问题
this.scrollTop = this.old.scrollTop
this.$nextTick(function() {
this.scrollTop = 0
});
uni.showToast({
icon: "none",
title: "纵向滚动 scrollTop 值已被修改为 0"
})
}
}
}
</script>
<style>
.scroll-Y {
height: 300rpx;
text-align: center;
background-color: black;
color: white;
border: 2px dashed gray;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
}
.scroll-view-item {
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
.scroll-view-item_H {
display: inline-block;
width: 100%;
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
</style>
更多推荐
已为社区贡献13条内容
所有评论(0)