微信小程序实现下拉刷新和上拉加载

最新推荐文章于 2021-05-27 20:39:24 发布

甜陈

最新推荐文章于 2021-05-27 20:39:24 发布

阅读量712

点赞数

本文链接：https://blog.csdn.net/weixin_46382775/article/details/104455334

版权

本文介绍了微信小程序中实现下拉刷新和上拉加载的步骤，包括在`home.json`配置下拉刷新，并在`home.js`中编写相关函数。通过这些操作，可以为手机端应用提供流畅的用户体验。作者鼓励读者在实践中遇到问题积极寻求帮助。

摘要由CSDN通过智能技术生成

不管做App和微信小程序只要是手机端的应用都离不开下拉刷新和上拉加载，这几天刚好没事，我就把以前做项目的经验拿出来给大家分享一下

1.首选我们开启首页的下拉刷新
pages/home/home.json

{
  "usingComponents": {
    "prolist": "/components/prolist/prolist"
  },
  "enablePullDownRefresh": true,   //开启下拉刷新
  "backgroundColor": "#efefef",
  "backgroundTextStyle": "dark"
}

完善相关的下拉刷新函数
pages/home/home.js

// pages/home/home.js
import { request } from './../../utils/index.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    bannerlist: [],
    prolist: [],
    pageCode: 1 // 页码
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    request('/api/pro/banner').then(data => {
      console.log(data)
      this.setData({
        bannerlist: data.data
      })
    })

    request('/api/pro').then(data => {
      consol