作者:林嘉文志鸿圣文 | 来源:互联网 | 2022-07-18 23:01
本篇文章主要介绍了微信小程序 scroll-view实现锚点滑动的示例,内容挺不错的,现在分享给大家,也给大家做个参考。
前言
最近开始做小程序,通读一遍文档再上手并不算难,但不得不说小程序里还是有一些坑。这里说一下如何实现页面锚点跳转,一个城市列表的效果示意图如下:
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
还有就是点了一个锚点实现了跳转,这个时候你滚动页面再点之前点的锚点,页面就不会再跳转了,这个时候就需要监听滚动事件,滚动时将scroll-into-view属性的值清空。或者在每次锚点跳转后,再由一个异步操作将scroll-into-view属性的值清空。
2017/12/05补充:
scroll-view默认是无滑动动画的,需要滚动的动画效果需要在组件上设置:scroll-with-animation='true'
关于固定高度height的设置问题,一开始我以为这个高度和滚动元素的数目/高度有关,这个时候处理动态变化的列表就很麻烦。后面在网上看到的一个方法就是使用wx.getSystemInfo方法得到windowHeight,把这个设置为scroll-view的高度(单位为px)即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注!