关于scroll-view的用法

1.下拉刷新的实现方法（@scrolltoupper只能在向下滑动一段距离再触顶才能生效）

实现方法：（注意：下拉执行完毕后，不要使下拉动画直接消失，因为在ios中会出现闪动，所以最好加一个延时器）

    // touch三个方法确定下拉刷新 
    touchStart (e) { 
      this.startY = e.pageY 
    }, 
    touchMove (e) { 
      if (e.pageY > this.startY && this.startScroll <= 10) { // 下拉刷新的条件是手指向下移动且scrolltop<=10(通过bindscroll事件去获取) 
        this.isTopLoading = true 
      } 
    }, 
    async touchEnd (e) { 
      if (this.isTopLoading && this.startScroll <= 10) { 
        await this.getHomeData() 
        //加延时器避免页面出现闪动 
        setTimeout(() => { 
          this.isTopLoading = false 
        }, 700) 
      } 
    } 
    // 记录滚动时候的scrolltop的值 
    scroll (e) { 
      this.startScroll = e.target.scrollTop 
    } 
复制代码

2.scroll-view的bindscroll在快速滑动时获取的scrolltop不准确

解决办法：给scroll-view加一个属性:throttle="false"

3.回到顶部的实现方法

1.template部分 
    <scroll-view :scroll-top="scrollTop">----简写 
   <div class="toTop" 
        v-if='topBtn' 
        @click="toTopHandler">回到顶部</div> 
2.script部分 
    computed: { 
        // 回到顶部的按钮，控制回顶按钮是否出现 
        topBtn () { 
          if (this.pageShow && this.startScroll > 500) { 
            return true 
          } else { 
            return false 
          } 
        } 
    } 
    methods:{ 
        // 回到顶部 
        toTopHandler () { 
          let topHeight = this.scrollTop 
          if (topHeight === 1) { 
            topHeight = 0 
          } else { 
            topHeight = 1 
          } 
          this.scrollTop = topHeight 
        } 
    } 
复制代码

另外的干货

1.判断网络状况

      mpvue.getNetworkType({ 
        async success (res) { 
          const networkType = res.networkType 
          if (networkType !== 'none') { 
            const url = `/pages/videoPlay/Index?video=${videoSrc}&cover=${imageUrl}` 
            mpvue.navigateTo({ url }) 
            mpvue.hideLoading() 
          } else { 
            mpvue.showToast({ 
              icon: 'none', 
              title: '抱歉，网络好像开小差了' 
            }) 
          } 
        } 
      }) 
复制代码

2.小程序中将视频保存到本地以及将文本复制到剪切板

    // 视频一键保存 
    saveHandler: utils.debounce(function (filePath, title) { 
    //检查授权状态 
      wx.getSetting({ 
        success: (res) => { 
          if (res.authSetting['scope.writePhotosAlbum'] === true) { 
            this.startSave(filePath, title) 
          } else { 
            // 未授权进行授权 
            mpvue.authorize({ 
              scope: 'scope.writePhotosAlbum', 
              success: () => { 
                this.startSave(filePath, title) 
              }, 
              fail: () => { 
                this.showModal(filePath, title) 
              } 
            }) 
          } 
        }, 
        fail: () => { 
          this.showModal(filePath, title) 
        } 
      }) 
    }, 300) 
    //视频保存 
    startSave (filePath, title) { 
      mpvue.showLoading({ 
        title: '保存中' 
      }) 
      mpvue.downloadFile({ 
        url: filePath, // 下载资源的地址网络 
        success: function (res) { 
          // console.log(res) 
          // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调 
          if (res.statusCode === 200) { 
            mpvue.saveVideoToPhotosAlbum({ 
              filePath: res.tempFilePath, 
              success (res) { 
                mpvue.hideLoading() 
                mpvue.showToast({ 
                  icon: 'success', 
                  title: '已保存到相册', 
                  duration: 1000 
                }) 
                if (title) { 
                  setTimeout(() => { 
                    // 复制内容到剪贴板的内容 
                    mpvue.setClipboardData({ 
                      data: title, 
                      success (res) { 
                        mpvue.showToast({ 
                          icon: 'success', 
                          title: '文案已复制', 
                          duration: 1500 
                        }) 
                      } 
                    }) 
                  }, 1200) 
                } 
              }, 
              fail () { 
                mpvue.hideLoading() 
                mpvue.showToast({ 
                  icon: 'none', 
                  title: '保存失败', 
                  duration: 1500 
                }) 
              } 
            }) 
          } 
        }, 
        fail: function () { 
          mpvue.showToast({ 
            icon: 'none', 
            title: '下载失败', 
            duration: 1500 
          }) 
        } 
      }) 
    }, 
    // 获取授权提示 
    showModal (filePath, title) { 
      mpvue.showModal({ 
        title: '操作提示', 
        content: '打开授权，允xx使用您的相册功能。', 
        success: (res) => { 
          if (res.confirm) { 
            wx.openSetting() 
          } 
        } 
      }) 
    } 
复制代码

一些另外的经验

1.onshow钩子是在每次进入页面都会执行，无论是tarbar的切换还是页面跳转，热启动小程序都会执行，mounted事件是只在冷启动小程序的时候才会去执行

2.小程序中删除或隐藏头部导航栏，实现全屏的方法：在app.json中的window中设置navigationstyle为custom---自定义