下拉刷新,触底加载

2021-04-08  本文已影响0人  alicemum

数据 db.json

用json-server启动服务器,模拟数据
注意事项

微信小程序上线后,后端必须是https域名,并且在开发配置中注册过服务器域名
如果本地模拟数据,则需要在开发者工具,右上角"详情", 开启

{
    "goodsList": [
        {
            "id": 1,
            "wineImg": "https://upload.putaojiu.com/2019/0404/1554359109853.jpg",
            "address": "",
            "numLimit": "5箱起批",
            "countryIco": "https://img.putaojiu.com/templates/putaojiu/cooper20/images/natflag/French.png",
            "info": "法国南部大地珍藏-60年老藤佳丽酿igp干红葡萄酒"
        },
        {
            "id": 2,
            "wineImg": "https://upload.putaojiu.com/2019/0404/1554359875733.jpg",
            "address": "",
            "numLimit": "5箱起批",
            "countryIco": "https://img.putaojiu.com/templates/putaojiu/cooper20/images/natflag/French.png",
            "info": "法国南部大地珍藏-圣希尼昂混酿aop干红葡萄酒"
        },
        {
            "id": 3,
            "wineImg": "https://upload.putaojiu.com/2019/0513/1557734417461.jpg",
            "address": "",
            "numLimit": "5箱起批",
            "countryIco": "https://img.putaojiu.com/templates/putaojiu/cooper20/images/natflag/French.png",
            "info": "法国罗讷河谷村庄级混酿南罗纳河谷顶级AOC干红葡萄酒"
        },
        {
            "id": 4,
            "wineImg": "https://upload.putaojiu.com/2019/0814/1565754238560.jpg",
            "address": "",
            "numLimit": "5箱起批",
            "countryIco": "https://img.putaojiu.com/templates/putaojiu/cooper20/images/natflag/French.png",
            "info": "法国南部大地松谷庄园梅洛IGP干红葡萄"
        },
        {
            "id": 5,
            "wineImg": "https://upload.putaojiu.com/2020/0616/1592293946151.jpg",
            "address": "",
            "numLimit": "1箱起批",
            "countryIco": "https://img.putaojiu.com/templates/putaojiu/cooper20/images/natflag/South-Africa.png",
            "info": "南非罗伯逊山谷梵劳伦莫斯卡托开普利斯起泡桃红葡萄汁饮料"
          },
          {
            "id": 6,
            "wineImg": "https://upload.putaojiu.com/2020/0526/1590459812467.jpg",
            "address": "",
            "numLimit": "5箱起批",
            "countryIco": "https://img.putaojiu.com/templates/putaojiu/cooper20/images/natflag/Australia.png",
            "info": "澳大利亚南澳领宾Linchpin莫斯卡托桃红气泡葡萄酒"
          },
          {
            "id": 7,
            "wineImg": "https://upload.putaojiu.com/2020/1124/1606207995193.jpg",
            "address": "",
            "numLimit": "1箱起批",
            "countryIco": "https://img.putaojiu.com/templates/putaojiu/cooper20/images/natflag/Italy.png",
            "info": "意大利皮埃蒙特莫斯卡托起泡酒"
          },
          {
            "id": 8,
            "wineImg": "https://upload.putaojiu.com/2019/0404/1554359109853.jpg",
            "address": "",
            "numLimit": "5箱起批",
            "countryIco": "https://img.putaojiu.com/templates/putaojiu/cooper20/images/natflag/French.png",
            "info": "法国8"
        },
        {
            "id": 9,
            "wineImg": "https://upload.putaojiu.com/2019/0404/1554359875733.jpg",
            "address": "",
            "numLimit": "5箱起批",
            "countryIco": "https://img.putaojiu.com/templates/putaojiu/cooper20/images/natflag/French.png",
            "info": "法国9"
        },
        {
            "id": 10,
            "wineImg": "https://upload.putaojiu.com/2019/0513/1557734417461.jpg",
            "address": "",
            "numLimit": "5箱起批",
            "countryIco": "https://img.putaojiu.com/templates/putaojiu/cooper20/images/natflag/French.png",
            "info": "法国10"
        },
        {
            "id": 11,
            "wineImg": "https://upload.putaojiu.com/2019/0814/1565754238560.jpg",
            "address": "",
            "numLimit": "5箱起批",
            "countryIco": "https://img.putaojiu.com/templates/putaojiu/cooper20/images/natflag/French.png",
            "info": "法国11"
        },
        {
            "id": 12,
            "wineImg": "https://upload.putaojiu.com/2020/0616/1592293946151.jpg",
            "address": "",
            "numLimit": "1箱起批",
            "countryIco": "https://img.putaojiu.com/templates/putaojiu/cooper20/images/natflag/South-Africa.png",
            "info": "南非12"
          },
          {
            "id": 13,
            "wineImg": "https://upload.putaojiu.com/2020/0526/1590459812467.jpg",
            "address": "",
            "numLimit": "5箱起批",
            "countryIco": "https://img.putaojiu.com/templates/putaojiu/cooper20/images/natflag/Australia.png",
            "info": "澳大利亚13"
          },
          {
            "id":14,
            "wineImg": "https://upload.putaojiu.com/2020/1124/1606207995193.jpg",
            "address": "",
            "numLimit": "1箱起批",
            "countryIco": "https://img.putaojiu.com/templates/putaojiu/cooper20/images/natflag/Italy.png",
            "info": "意dd"
          }
    ]
}

小程序代码

Page({
  data: {
    list: [],
    page: 1,
    isReachBottom: false
  },
  onLoad() {
    this.getData(1)
  },
  // 当下拉刷新时
  onPullDownRefresh() {
    // console.log('下拉刷新');
    this.getData(1)
  },
  // 加载数据
  getData(page) {
    wx.showLoading({
      title: '加载中',
    })
    // 页面初始化时加载数据
    let temp = this.data.list;
    wx.request({
      url: `http://127.0.0.1:3000/goodsList?_page=${page}&_limit=4&_sort=id&_order=desc`,
      method: 'get',
      success: res => {
        wx.hideLoading()
        if (page >= 5){
          this.setData({
            isReachBottom: true
          })
          return;
        }
        wx.stopPullDownRefresh()
        this.setData({
          list: [...temp, ...res.data]
        })
      }
    })
  },
  onReachBottom() {
    let page = ++this.data.page;
    this.setData({
      page
    })
    this.getData(page)
  }
})
上一篇 下一篇

猜你喜欢

热点阅读