美文网首页微信小程序全栈开发实战课程--真自律
5-3【微信小程序全栈开发课程】首页完善(三)--下拉刷新、分享

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

作者: l猫宁一 | 来源:发表于2019-11-01 16:32 被阅读0次

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

    下拉刷新的函数是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)测试下拉刷新功能
    (2)分享功能测试

    点击右上角的「三点」按钮,出现转发的选项,说明添加成功

    作者:猫宁一
    全栈程序媛₍ᐢ •⌄• ᐢ₎一枚~
    可到【猫宁一】公众号回复【源码】领取我所有全栈项目代码哦~

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

    相关文章

      网友评论

        本文标题:5-3【微信小程序全栈开发课程】首页完善(三)--下拉刷新、分享

        本文链接:https://www.haomeiwen.com/subject/jeuqvctx.html