小程序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

                      })

                    }

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

  

 

                     

            

 

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

上一篇:微信小程序得路由跳转


下一篇:微信小程序--公共头部组件