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

场景

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

• @scrolltolower=“lower” 绑定一个回调函数，就是说条件满足，触发此函数
• lower-threshold=“20rpx” 到距离底部还有20rpx在触发上面的@scrolltolower="lower"事件
• 你可以按照自己的需求修改这个值，这个是按照自己的业务场景而定

• scroll-y=“true”，允许纵向y轴滚动

  注意： id="test"这个盒子一定要有高度，要不然滚不动！如果你出现了此问题请看我mpvue其他文章里面有解决办法！

重点核心

在methods中定义一个上面绑定的方法，lower。

lower(){
          if(this.addStatus){
            this.addStatus = !this.addStatus;
            // 这里写你想要的逻辑
           let that = this;
            wx.request({
                  url: that.URL",
                  method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
                  data: that.info,
                  success: function (res) {
                    // success
                  },
                  fail: function () {
                    // fail
                    console.log("失败");
                  },
                });
            // 这个异步的逻辑是核心 不能少
            new Promise((resolve, reject) => {
              let that = this;
              setTimeout(function(){
                that.addStatus = !that.addStatus;
              }, 3000);
            });
          }
        },
           

• 在data中定义一个状态addStatus，用于控制滑动请求次数，因为我们定义的是距离底部20rpx，所以可能会触发多次lower函数
• 所以我们定义一个状态保证一次只有一个请求
• 当进入 if(this.addStatus)后立马把 this.addStatus状态改为false,保证不会再进来了
• 开始请求数据，或其他逻辑
• 最后Promise异步重置这个状态that.addStatus，保证下次可以继续进来，并且这不会阻碍程序继续加载
• 我这边按照我的需求是三秒钟， 可以按照自己的业务来定

结束

scroll-view滚不动！如果你出现了此问题请看我mpvue其他文章里面有解决办法！最后友情链接有我的博客和github地址，欢迎相互沟通学习！

想一起讨论/学习微信小游戏开发的，GO语言开发的，请微信搜索下方小程序加博主微信群