当前位置: 首页 > Web前端 > HTML5

干货-实战vue移动UI框架:滑动加载

时间:2023-04-05 14:35:08 HTML5

@mixinone-screen{position:absolute;左:0;顶部:0;宽度:100%;高度:100%;溢出:隐藏;}@mixin溢出-滚动{溢出:滚动;-webkit-overflow-scrolling:touch;}.r-scroll{@includeone-screen;@include溢出滚动;&-加载ing{文本对齐:居中;填充顶部:3vw;底部填充:3vw;字体大小:14px;颜色:#656565;行高:20px;&-text{显示:内联块;:中间;}}}前言我们的移动端还有一个非常常用的组件,那就是滑动加载更多的组件。通常我们看到很多插件的实现都比较复杂,所以觉得这个组件很难,其实不然!!这个组件其实可以很简单的实现,体验也可以很好(当然我们没有实现下拉刷新功能)!!让我们一起实现这个组件。效果展示先放一张gif图展示我们制作完成后的效果,如下:DOM结构页面应该包含三部分:1.文本区域2.加载小菊花并记录文本3.所有数据加载完成后的文本:

{{loadingText}}
{{complateText}}
cssStyle整个组件的容器r-scroll要有固定的宽度,多余的部分可以滚动;文本区域应随内容和高度自动增长;底部滚动距离为默认值时显示加载菊花;所有数据加载完成后显示数据加载完成的文本:@mixinone-screen{position:absolute;左:0;顶部:0;宽度:100%;高度:100%;溢出:隐藏;}@mixin溢出-滚动{溢出:滚动;-webkit-overflow-scrolling:touch;}.r-scroll{@includeone-screen;@include溢出滚动;&-加载ing{文本对齐:居中;填充顶部:3vw;底部填充:3vw;字体大小:14px;颜色:#656565;行高:20px;&-text{显示:内联块;:中间;}}}javascript交互逻辑分析:页面初始化时,获取整个组件节点和文本容器节点,将整个容器节点绑定到scroll事件容器,判断距顶部的距离是否小于滚动过程中小于指定值,小于则触发自定义事件loadmore。监听业务代码中的loadmore事件。如果触发了,加载数据,因为代码并不复杂,就不详细分析了。请阅读代码注释。不清楚的请在评论区留言:另外在loadingdaisy中引用本组件Component,附上一个小菊花组件代码,因为代码简单,就不详细分析了:菊花使用的是gif图片,请拍一张你喜欢的菊花gif放在该路径下菊花组件.r-loading-container{显示:内联块;垂直对齐:中间;img{宽度:20px;高度:20px;显示:块;}}写在最后,最后是一个用法示例:.item{背景颜色:#f2f2f2;border-bottom:1pxsolid#fff;高度:40px;行高:40px;文本对齐:居中;