微信小程序页面无限滚动流

本文介绍了如何在mpvue框架下利用scroll-view组件实现微信小程序的页面无限滚动流。通过设置@scrolltolower事件和lower-threshold属性,结合在methods中定义的lower方法控制加载逻辑,确保数据按需加载。遇到滚动不畅的问题,可以参考作者的其他mpvue相关文章寻找解决方案。
摘要由CSDN通过智能技术生成

场景

当前的小程序非常火,开发起来也很快,框架很多,今天讲下mpvue这个框架实现页面无限滚动流,滚动到底加载新数据。

问题

微信小程序不支持Dom, 那么要实现一个无限的滚动效果那不是蛋疼?

mpvue+scroll-view实现

mpvue这个是美团开源的一个框架, 语法是和vue99%相似,但是坑很多,如果你遇到可以看下我的mpvue的其他文章,里面详细的讲了哪些坑以及解决办法。
scroll-view标签是微信原生提供的标签组件, 全局可用。看代码, 先在templates中把结构写好, 注意mpvue可以使用微信原生的标签!

<template>
<div id="test">
	 <scroll-view  @scrolltolower="lower" lower-threshold="20rpx" scroll-y="true">
	      <div v-for="(v,i) in content" :key="i">
	        <p class="text" v-for="(val, n) in v" :key="n" v-text="val"></p>
	      </div>
    </scroll-view>
</div>
</template>
  • @scrolltolow
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值