微信小程序的视图容器-- scroll-view

scroll-view:可滚动视图区域


我们在.wxml文件中使用scroll-View



我们在scroll-view中设置了4个view,这里绑定了,scroll-view滚动到顶部(垂直布局)bindscrolltoupper方法,并设置了scroll-y的值为true。表示允许纵向滚动。在对应.wxss文件中实现布局,这里我们实现scroll-view的竖直滚动使用竖向滚动时,需要给一个固定高度,通过 WXSS 设置 height。

.contentScroll{

width: 100%;

height: 500rpx;

background-color: yellow;

}

.view1{

width: 100%;

height: 300rpx;

background-color: red;

}

.view2{

width: 100%;

height: 300rpx;

background-color: greenyellow;

}

.view3{

width: 100%;

height: 300rpx;

background-color: cadetblue;

}

.view4{

width: 100%;

height: 300rpx;

background-color: yellow;

}

在.js文件中执行changeP方法

changeP:function (){

console.log("到顶部了");

}

页面显示的效果:


页面可以纵向滚动,当滚动到最顶部时,在控制台会输出:到顶部了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容