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

                          })

                        }

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

      

                         

                

  • 相关阅读:
    安卓获取双IMEI
    NodeJS异步、同步 创建多层文件夹
    Winfrom 控件名称缩写
    Unobtrusive Ajax
    ID 为 17608的进程当前未运行
    欢迎
    路由
    VS快捷键
    Test
    并查集与带权并查集---由浅入深
  • 原文地址:https://www.cnblogs.com/a973692898/p/13182495.html
Copyright © 2020-2023  润新知