场景
当前的小程序非常火,开发起来也很快,框架很多,今天讲下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