• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

grow-scroll: 一款精致的滚动组件,支持pc和移动端,目前支持上拉刷新和下拉加载,轮 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

grow-scroll

开源软件地址:

https://gitee.com/xiaohuan171/grow-scroll

开源软件介绍:


grow-scroll

一款精致的滚动组件,支持pc和移动端,目前支持上拉刷新和下拉加载,轮播,通讯录,后续会添加更多功能

预览地址

https://xiaohuan171.gitee.io/grow-scroll

文档

https://gitee.com/xiaohuan171/grow-scroll/wikis/pages

如何使用

# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build

快速入门

参考简单示例

常见问题

grow-scroll 初始化了, 但是没法滚动。

不能滚动是现象,我们得搞清楚这其中的根本原因。在这之前,我们先来看一下浏览器的滚动原理:浏览器的滚动条大家都会遇到,当页面内容的高度超过视口高度的时候,会出现纵向滚动条;当页面内容的宽度超过视口宽度的时候,会出现横向滚动条。也就是当我们的视口展示不下内容的时候,会通过滚动条的方式让用户滚动屏幕看到剩余的内容。

grow-scroll 也是一样的原理,我们可以用一张图更直观的感受一下:

布局

绿色部分为 wrapper,也就是父容器,它会有固定的高度。黄色部分为 content,它是父容器的第一个子元素,它的高度会随着内容的大小而撑高。那么,当 content 的高度不超过父容器的高度,是不能滚动的,而它一旦超过了父容器的高度,我们就可以滚动内容区了,这就是 grow-scroll 的滚动原理。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap