小程序开发框架——scroll-view滚动容器

本文详细介绍了小程序中的scroll-view组件,包括其在横向和纵向滚动的应用,以及scroll-x、scroll-y、upper-threshold、lower-threshold等关键属性的使用。此外,还讨论了scroll-into-view、scroll-with-animation、enable-back-to-top等特性,以及bindscrolltoupper、bindscrolltolower和bindscroll事件的绑定,提供了一个全面了解和运用scroll-view组件的指南。
摘要由CSDN通过智能技术生成

当我们页面内容元素过多时超过视图的编辑范围,我们就可以使用小程序的scroll-view 组件;

    scroll-view是可滚动视图区域组件,提供了两种滚动方式 1、横向滚动通过 scroll-x 设置;

    2、纵向滚动 通过 scroll-y 设置;                 
    
    3、upper-threshold 这个属性是距离顶部左边多远时(单位px),触发scrolltoupper 事件;

    4、lower-threshold 这个属性是距离底部右边多远时(单位px),触发scrolltolower 事件;

    5、scroll-top 这个属性是设置竖向滚动条的位置(单位px);

    6、scroll-left 这个属性是设置横向滚动条的位置(单位px); 

    7、scroll-into-view 表示滚动到某个子元素,子元素需要设置id的属性,scroll-into-view指示某个子元素的id时会滚动到该id子元素处;

    8、scroll-with-animation 在设置滚动条滚动时是否使用过渡动画;

    9、enable-back-to-top 这个属性是当页面内容比较多的时候一直向下滑,需要回到上面去时就不用一下下的往回滑,通过设置 enable-back-to-top 属性、ios点击顶部状态栏,

    安卓双击标题栏时,滚动条就会返回顶部(只支持竖向滚动方式);
    
    10、bindscrolltoupper 这个事件是可以绑定滚动到最顶部或者最左边的时候

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值