vant/vue实现小程序下拉刷新功能方法详解
<p>首先先把van-list控件放入列表项中 </p><div class="jb51code"><pre class="brush:xhtml;"><van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<list-nav :list="list"></list-nav>
</van-list></pre></div>
<div class="jb51code"><pre class="brush:js;">data(){
return{
list: [],
}
}</pre></div>
<p>通过methods方法进行更新数据</p>
<div class="jb51code"><pre class="brush:js;">onLoad() {
// 异步更新数据
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
setTimeout(() => {
for (let i = 0; i < 0; i++) {
this.list.push(this.list.length + 1);
}
// 加载状态结束
this.loading = false;
// 数据全部加载完成
if (this.list.length >= 6) {
this.finished = true;
}
}, 1000);
},</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/202212241329551.png" /></p>
<p> </p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202212/202212241329552.png" /></p>
<div class="cros igoods"><div class="goodsin" data-img="https://img14.360buyimg.com/pop/jfs/t1/114205/27/29510/101379/63058925Edda3a83d/60189e35075fc9ee.jpg" data-name="HTML5 App应用开发教程（第2版·微课视频版） 轻松学习ES6+、Vue.js、uni-app" data-owner="京东自营" data-price="65.1" data-tgid="20" data-url="https://union-click.jd.com/jdc?e=&p=JF8BAMkJK1olXwUAU11UD0sRBV8IGVkXXQEFUG4ZVxNJXF9RXh5UHw0cSgYYXBcIWDoXSQVJQwYAVlxdD0wTHDZNRwYlGVpGC0QFfRN0YytVcAJJXQV1IlteaEcbM2gNHF4dXwMBZF5eDkwXAmoIK2sVXDZQOobrvpOysnPcsdTA1ZEyVW5dD00XCmsAE1gdXAYCZF5VDHtUVypcWBhdbTYyV25tOEsnAF9WdVpGWwVQUl4KZhZFAzcBQghOMwEAXVlaDU8UM20JGlkXbTY"></div></div>
<p>以上就是vant/vue实现下拉刷新功能方法详解的详细内容，更多关于vant/vue实现下拉刷新功能的资料请关注琼殿技术社区其它相关文章！</p>
<div class="art_xg">
<b>您可能感兴趣的文章:</b><ul><li>vue使用better-scroll实现下拉刷新、上拉加载</li><li>vue插件mescroll.js实现移动端上拉加载和下拉刷新</li><li>vueScroll实现移动端下拉刷新、上拉加载</li><li>vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)</li><li>vue基于vant实现上拉加载下拉刷新的示例代码</li><li>vue实现原生下拉刷新</li><li>Vue uni-app框架实现上拉加载下拉刷新功能</li><li>Vue vant-ui框架实现上拉加载下拉刷新功能</li></ul>
</div>
</div>
<!--endmain-->
頁:
[1]