温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

微信小程序怎么实现滚动加载更多功能

发布时间:2022-01-20 14:34:38 来源:亿速云 阅读:182 作者:清风 栏目:开发技术

这篇文章主要为大家展示了微信小程序怎么实现滚动加载更多功能,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“微信小程序怎么实现滚动加载更多功能”这篇文章吧。


 

1.需要用到的组件和api

scroll-view(可滚动视图区域)

wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的

2.需要用到的属性

3.scrol-view需要指定一个高度,这个高度可以按自己的需求计算,我使用的是屏幕可用高度并且默认一页显示6个

4.滚动到底部绑定需要触发的事件

<scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='lower'>

5.操作事件函数,主要是将请求下来的数据用concat方法进行合并,然后赋值,我是用的for循环假装添加的数据,实际项目中可以换成自己的ajax,并且为了模拟加载我添加了一个1.5秒的定时器,先调用提示框api成功之后关闭

  lower() {

    var result = this.data.res;

    var resArr = [];

  //这里可以使用自己的ajax

    for (let i = 0; i < 10; i++) {

      resArr.push(i);

    };

    var cont = result.concat(resArr);//合并请求的数据

    console.log(resArr.length);

    if (cont.length >= 100) {

      wx.showToast({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中”  

        title: '我也是有底线的',

        icon: 'success',

        duration: 300

      });

      return false;

    } else {

      wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中”  

        title: '加载中',

        icon: 'loading',

      });

      setTimeout(() => {

        this.setData({

          res: cont

        });

        wx.hideLoading();

      }, 1500)

    }

  }

6.成功,放完整代码可以直接复制运行

wxml代码

class='box'>

<scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='lower'>

  <view wx:for="{{res}}" data-id="{{index}}" wx:key="{{index}}" style="height:{{(height/6)-1}}px;width:100%;text-align:center;line-height:{{(height/6)-1}}px; border-bottom:1px solid #ccc">{{item}}view>

scroll-view>

view>

js代码

Page({

  /**

   * 页面的初始数据

   */

  data: {

    height: '',

    res: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  },

  lower() {

    var result = this.data.res;

    var resArr = [];

    for (let i = 0; i < 10; i++) {

      resArr.push(i);

    };

    var cont = result.concat(resArr);

    console.log(resArr.length);

    if (cont.length >= 100) {

      wx.showToast({ //如果全部加载完成了也弹一个框

        title: '我也是有底线的',

        icon: 'success',

        duration: 300

      });

      return false;

    } else {

      wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中”  

        title: '加载中',

        icon: 'loading',

      });

      setTimeout(() => {

        this.setData({

          res: cont

        });

        wx.hideLoading();

      }, 1500)

    }

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

    wx.getSystemInfo({

      success: (res) => {

        this.setData({

          height: res.windowHeight

        })

      }

    })

  }

}) 

小程序是什么意思

小程序是一种不需要下载安装即可使用的应用,通过扫描二维码或是搜一搜立即使用,操作简单,便于传播,能够实现消息通知、线下扫码、公众号关联等七大功能。它基于微信运行的,类似于APP,想用就用,用完即走,不会占用内存。

以上就是关于“微信小程序怎么实现滚动加载更多功能”的内容,如果该文章对您有所帮助并觉得写得不错,劳请分享给您的好友一起学习新知识,若想了解更多相关知识内容,请多多关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI