5.3【微信小程序全栈开发课程】首页完善(三)--下拉刷新、分享功能

如果服务器出现错误,用户可以自己下拉刷新页面来获取当前分数

下拉刷新的函数是onPullDownRefresh

这节我们来实现下拉刷新的功能

1、创建文件

在src/pages/index文件夹下面创建main.json文件,并在文件里面加上代码,用来允许这个页面可以下拉刷新

{
  "enablePullDownRefresh":true
}

2、添加下拉刷新函数

编辑src/pages/index/index.vue文件,添加onPullDownRefresh函数

//参考代码,无需粘贴
//onShow () {
//...
//},


//需要添加的部分,不要忘记在上一行添加逗号
onPullDownRefresh () {
  this.getCurrentMark()
  //获取完当前分数后,停止下拉刷新的状态
  wx.stopPullDownRefresh()
}

3、添加分享函数

还是继续在index.vue文件中添加,分享函数是onShareAppMessage

//参考代码,无需粘贴
//onPullDownRefresh () {
//...
//},


//需要添加的部分,不要忘记在上一行添加逗号
onShareAppMessage(e) {
  return {
    title: "真自律",
    path: "/pages/index/main",
    imageUrl: ""
  }
}

4、测试

(1)测试下拉刷新功能

5.3【微信小程序全栈开发课程】首页完善(三)--下拉刷新、分享功能_第1张图片

(2)分享功能测试

点击右上角的「三点」按钮,出现转发的选项,说明添加成功
5.3【微信小程序全栈开发课程】首页完善(三)--下拉刷新、分享功能_第2张图片

作者:猫宁一
全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~ 热爱学习!热爱编程!
可关注【猫宁一】公众号领取我所有全栈项目代码哦~

点击查看课程目录:微信小程序全栈开发课程目录

你可能感兴趣的:(微信小程序全栈开发课程)