uniap 中scroll-view 监听滚动上拉加载
  jqO5822mAt6g 2023年11月02日 25 0

1、在scroll-view 标签上添加 @scrolltolower="onloadMore" 方法

<scroll-view class="scroll-view-box" scroll-y="true" @scrolltolower="onloadMore">
  <view class="info">
    <text class="info-text">内容展示在这里是上海市考核</text>
  </view>
  <uni-list>
    <uni-list-item v-for="item in contentCate" :key="item" :title="item.name" ></uni-list-item>
  </uni-list>
  <uni-load-more :status="onload"></uni-load-more>
</scroll-view>

2、直接使用方法进行监听

onloadMore(){
  console.log("到底了")
	this.getList.push("你要添加的数据")
  this.onload = "loading"
}
<uni-load-more :status="loading"></uni-load-more>

uni-load-more 插件可以进行加载动画,more ,loading,noMore 三种状态值。

3、父级标签如何监听滚动到底部,小程序生命周期带有的 onReachBottom 事件,他的作用就是监听页面滚动

onReachBottom() {
			 console.log("到底了");
		}

还可以设置距离底部多少距离加载需要加载page.json中

"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "app",
			"onReachBottomDistance": 300 #距离底部300px 开始加载下面的数据
		}
	}],
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  eHipUjOuzYYH   2023年12月07日   28   0   0 数据乐观锁redis
  jnZtF7Co41Wg   2023年12月09日   28   0   0 客户端服务端数据
  eHipUjOuzYYH   2023年12月06日   26   0   0 nginx加载IPV6