这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

onReachBottom

onReachBottom是页面上拉触底事件自带的处理函数判断上拉有没有下一页，如果有的话就加载下一页的数据并显示，没有就弹出提示说没有 wx.showToast是界面交互的一个方法，会弹出一个提示框，里面可以简单绘制页面

QQ图片20211112162349.png

onReachBottom(){
    if( this.pagenum >= this.totalPages ){
      wx.showToast({
        title: '最后一页啦！',
        icon: 'success',
        duration: 2000
      })
    }else{
      this.pagenum++ ;
      // 重新请求数据
      this.getInfoList();
    }
  },

将请求的数据与原来的数据进行拼接，为了不覆盖之前的数据

 this.setData({
      InfoList: [...this.data.InfoList, ...res.data.message.info]
 })

显示加载中效果

显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框

  wx.showLoading({
    title: '加载中',
    mask: true
  })

数据加载完成后再关闭，当异步请求有多个时，我们需要将请求计数，当全部请求完毕后再关闭加载框

complete:()=>{
    times--;
    if(times == 0){
        wx.hideLoading()
    }
}

onPullDownRefresh

onPullDownRefresh监听用户下拉动作需要在json文件中加入 enablePullDownRefresh（是否开启当前页面下拉刷新），backgroundTextStyle（下拉 loading 的样式，仅支持 dark / light） "enablePullDownRefresh": true, "backgroundTextStyle": "dark"

将data中的数组重置为空，因为我们现在只需要第一页的数据,将当前页面改变为默认值1，并重新发送请求

    this.setData({
      InfoList: []
    })
    this.pagenum = 1
    this.getInfoList();
  }

请求完成后，关闭下拉刷新窗口wx.stopPullDownRefresh();

点击轮播图预览大图

给轮播图绑定点击事件 handlePrevewImage后调用小程序api prevewImage

handlePrevewImage(e){
    // 1. 构造要与预览的图片数组
    const urls = this.InfoList.pics.map(v=>v.pics_mid)
    // 接受传递过来的图片url
    const current = e.currentTarget.dataset.url;
    wx.previewImage({
      urls: urls,
      current: current,
      showmenu: true,
    })
  }

封装 showModal模拟对话框

在utils文件夹下创建一个js文件，将showModal内容写在里面，传递过来的参数是 content，也就是对话框中的内容

export const showModal=({content})=>{
  return new Promise((resolve, reject)=>{
    wx.showModal({
      title: '提示',
      content: content,
      success: (res)=>{
        resolve(res)
      },
      fail:(err)=>{
        reject(err)
      }
    })
  })
}

导入showModal import {showModal} from "../../utils/asyncWx.js", 还有导入支持async的runtime.js, 就可以使代码看起来简洁啦

async handleDelete(e){
      const res = await showModal({content: '您是否要删除？'}) 
      if(res.confirm){
        //点击确认执行的内容
        return;
      }else{
        return;
      }
    }
},

onShow 获得页面传递过来的参数

onLoad(options){ console.log(options); } 在onLoad中可以直接获得页面传递过来的参数，但是在onShow中需要获得小程序中的页面栈

onShow(){
    let pages = getCurrentPages();
    let currentPage = pages[pages.length - 1];
    console.log(currentPage.options);
},

防抖

防抖一般由于输入框中，防止重复输入，重复发送请求

TimeId: -1 清除上一次的定时器，并定义一个定时器，等输入稳定后再发起请求

clearTimeout(this.TimeId);
this.TimeId = setTimeout(()=>{
    this.search(value);
}, 1000);

微信开发者工具上拉刷新和下滑加载效果