前言:
之前写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
})
}
这样就实现了返回顶部功能