小程序scroll-view组件，个人理解

前言：

之前写vue的时候用到的第三方插件是better-scroll，用来处理滚动问题

刚一接触小程序，发现似乎不需要这种better-scroll滚动这种类似功能；

不过后来用到了，哈哈哈

总结的问题：1.给scroll-view设置的height无效！！！（calc）

　　　　　　答：设置固定高度是有效的，如px，rpx这种；当然还可以使用100vh（当前视图页面）

　　　　　　　　不过我在项目中遇到的情况是，要在下面预留一块地方（用来放功能键）

　　　　　　　　我当时给<scroll-view>加了一个class，在对应的wxss文件里给它设置了一个高度： height:calc(100%-120rpx)

　　　　　　　　发现并没有效果，但是写成固定高度就可以，后来在网上找了下，才知道，

　　　　　　　　calc失效的解决办法：给<scroll-view>外面的容器设置height：100%；

　　　　　　　　可以直接在给page设置一下高度，就可以使calc生效

　　　　代码如下：

//-------这里是wxml文件------
<scroll-view class='demo' scroll-y>
//内容
//内容
</scroll-view>        

//-------这里是wxss文件---------

//给scroll外面设置高度
page{
   height:100%;    
}
//给scroll设置高度（calc）
.demo{
  height:calc(100%-120rpx)    
}

总结的问题：2.实现返回顶部功能

　　　　　　我在项目中用到了这个功能，就是一个很简单的返回顶部功能；

　　　　　　在这里有些是需要注意的：

　　　　　　　　2-1.返回顶部按钮的显示和隐藏

　　　　　　　　　　在data中声明一个布尔类型的属性 isShowBackTop ：false

　　　　　　　　　　　 wxml页面中通过wx:if="{{isShowBackTop}}"来控制显示和隐藏

　　　　　　　　　　　 在<scroll-view>中我们可以通过bind:scroll="handleScroll"监听滚动

　　　　　　　　　　　 先获取到滚动的y值： const scrollTop=e.detail.scrollTop;

　　　　　　　　　　　 声明一个布尔值： const flag = scrollTop >= 1000; （如果大于等于就是true，否则就是false）

　　　　　　　　　　　 通过this.setData()方法实时改变数据

　　　　　　　 *注意： 如果直接使用this.setData改变的话，官方是不推荐的，官方文档中明确指出，

　　　　　　　　　　　 请不要频繁的调用this.setData(大概就是这个意思吧)，直接使用的后果，就是页面非常卡顿。。。

　　　　　　　　　　　 我们可以加上一层判断，如下:

　　　　　　　　　　　　　if(flag !== this.isShowBackTop){

　　　　　　　　　　　　　　　this.setData({

　　　　　　　　　　　　　　　isShowBackTop:flag

　　　　　　　　　　　　　　})

　　　　　　　　　　　　 }

　　　　　　　　　　　这样就不会频繁的调用this.setData了

　　　　　　2-2.这时候显示隐藏的功能已经实现了，接下来就是回到顶部的功能了

　　　　　　　　　　　　 在使用<scroll-view>之前，我是直接将返回顶部的方法封装到back-top这个组件的js文件中去了，如下：

　　　　　　　　　　　　　　　　handleBackTop(){

　　　　　　　　　　　　　　　　　　wx.pageScrollTo({

　　　　　　　　　　　　　　　　　　　　scrollTop:0

　　　　　　　　　　　　　　　　　　})

　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　后来使用了<scroll-view>发现这个功能不起作用了，于是我就自定义一个事件发给了父组件：backTop

　　　　　　　　　　　　　在官方文档中看到可以通过scroll-top来控制高度；

　　　　　　　　　　　　　于是我就在data中创建了一个scrollTop：0；

　　　　　　　　　　　　　在wxml文件中：<scroll-view scroll-top="{{scrollTop}}" ></scroll-view>使用了该属性

　　　　　　　　　　　　　　　　　　　　 <back-top bind:backTop="backTop">接收自定义事件

　　　　　　　　　　　　　在js文件中，监听backTop：

　　　　　　　　　　　　　　　　　　　　backTop(){

　　　　　　　　　　　　　　　　　　　　　　this.setData({

　　　　　　　　　　　　　　　　　　　　　　　　scrollTop:0

　　　　　　　　　　　　　　　　　　　　　　})

　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　这样就实现了返回顶部功能