微信小程序触底加载 scroll-view
了解什么是触底加载？
需求：有个固定高度的容器，实现容器里面的内容触底加载
1、内容盒子的高度
2、盒子里内容的总高度
3、滚动条的scrollTop
触底加载的原理就是 当里面的容器触底的时候进行分页，请求接口合并数据
公式
盒子的高度+滚动条的scrollTop = 内容高度
使用原生的计算方法比较麻烦 因此市面上有很多关于触底加载的插件
我们这里使用的是 uni-app 里面的 scroll-view
scroll-view 属性
scroll-x：false - 允许横向滚动
scroll-y：false - 允许纵向滚动
show-scrollbar： 距顶部/左边多远时（单位px），触发 scrolltoupper 事件
scroll-top：false - 控制是否出现滚动条
@refresherrefresh： - 自定义下拉刷新被触发
@scroll： - 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
@scrolltoupper：滚动到顶部/左边，会触发 scrolltoupper 事件
@scrolltolower：滚动到底部/右边，会触发 scrolltolower 事件
refresher-threshold：45 - 设置自定义下拉刷新阈值
实战上代码
亿点小知识：使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式。
页面 根据不同的需求开启不同的属性
<scroll-view class="car-list" refresher-enabled="true" :refresher-triggered="flag" @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower" scroll-y="true" > <view class="item-msg" v-for="(item, index) in list" :key="item.id" > {{item.name}} </view> </scroll-view>
js 这里的逻辑大家可以根据自己的接口规则进行变动 主要的是看代码的逻辑
如有更好的代码逻辑 可以私信我 一起讨论
data() { return { list: [], flag:false, query: { per_page: 10, page: 1, }, total:0, } }, methods: { refresherrefresh(){ // 下拉刷新 this.flag = true // 开启下拉刷新 this.query = { per_page: 10, page: 1, } this.list = [] this.refreshFun() setTimeout(() => { this.flag = false; // 关闭下拉刷新 }, 1000); }, // 每次刷新需要用到的方法 refreshFun(){ if(this.index == 1 || this.index == 2){ // 判断是否需要传参 启用/禁用 this.query.enabled = this.index == 1 ? 1 : 0 this.init() }else{ if(this.query.enabled == 1 || this.query.enabled == 0){ delete this.query.enabled } this.init() } }, // 触底加载 scrolltolower () { const { list, total,query } = this if (list.length === total) return // 判断是否加载全部 query.page++ // 触底加载 ++ this.refreshFun() }, async init () { // 数据渲染 let { query } = this uni.showLoading() // 加载中 let data = await 接口(query) uni.hideLoading() // 加载完成 if ( data.code === SUCCESS ) { this.total = data.meta.total // 获取总数 this.list = this.list.concat(data.data) // 合并数据 } }, }
以上就是微信小程序触底加载感谢大家的阅读
如碰到其他的问题 可以私下我 一起探讨学习
如果对你有所帮助还请 点赞 收藏谢谢~！
关注收藏博客 作者会持续更新…
