前言
在我们移动端还有一个很常用的组件, 那就是滑动加载更多组件. 平常我们看到的很多插件实现相当复杂就觉得这个组件很难, 其实不是的!! 这个组件其实可以很简单的就实现出来, 而且体验也能非常的棒 (当然我们没有实现下拉刷新功能)!! 下面我们就一起来实现这个组件. Github 源码 (不麻烦的话帮忙 start, 请各位大爷赏个星星) https://github.com/webKity/r-ui/tree/master/src/components/scroll ;demo 展示 http://demo.divpc.cn/#/ .
效果展示
先上一个 gif 图片展示我们做成后的效果, 如下:
DOM 结构
页面应该包含三个部分: 1. 正文区域 2. 加载小菊花以及记载文字 3. 所有数据加载完成后的文字:
- <div ref="scroll" class="r-scroll">
- <div class="r-scroll-wrap">
- <slot></slot>
- </div>
- <slot name="loading">
- <div v-show="isLoading" class="r-scroll-loading">
- <r-loading></r-loading>
- <span class="r-scroll-loading-text">{{loadingText}}</span>
- </div>
- </slot>
- <slot name="complate">
- <div v-show="isComplate" class="r-scroll-loading">{{complateText}}</div>
- </slot>
- </div>
CSS 样式
整个组件的容器 r-scroll 应该是固定宽度, 超出部分可以滚动的; 正文区域应该是随着内容, 高度自动增长的; 加载小菊花在滚动距离底部默认数值的时候显示; 所有数据加载完成后显示数据加载完成文字:
- <style lang="scss">
- @mixin one-screen {
- position: absolute;
- left:0;
- top:0;
- width:100%;
- height:100%;
- overflow: hidden;
- }
- @mixin overflow-scroll {
- overflow: scroll;
- -webkit-overflow-scrolling: touch;
- }
- .r-scroll{
- @include one-screen;
- @include overflow-scroll;
- &-loading{
- text-align: center;
- padding-top: 3vw;
- padding-bottom: 3vw;
- font-size: 14px;
- color: #656565;
- line-height: 20px;
- &-text{
- display: inline-block;
- vertical-align: middle;
- }
- }
- }
- </style>
- javascript
交互逻辑分析:
页面初始化的时候, 获取整个组件节点以及正文容器节点
对整个容器节点进行绑定 scroll 事件
容器进行滚动的过程中判断是否距离顶部小于指定数值, 如果小于则触发自定义事件 loadmore
业务代码中监听 loadmore 事件, 如果触发则加载数据
因为代码不复杂, 故不详细解析, 大家看下代码注释, 如有不清楚的请在评论中发表评论:
- <script>
- import rLoading from '../loading'
- export default{
- components: {rLoading},
- props: {
- // 距离底部数值, 小于或等于该数值触发自定义事件 loadmore
- bottomDistance: {
- type: [Number, String],
- default: 70
- },
- // 加载中的文字
- loadingText: {
- type: String,
- default: '加载中...'
- },
- // 数据加载完成的文字
- complateText: {
- type: String,
- default: '-- 我是个有底线的列表 --'
- }
- },
- data () {
- return {
- // 用来判定数据是否加载完成
- isComplate: false,
- // 用来判定是否正在加载数据
- isLoading: false,
- // 组件容器
- scroll: null,
- // 正文容器
- scrollWrap: null
- }
- },
- watch: {
- // 监听 isLoading, 如果 isLoading 的值为 true 则代表触发了 loadmore 事件
- isLoading (val) {
- if (val) {
- this.$emit('loadmore')
- }
- }
- },
- methods: {
- // 初始化组件, 获取组件容器, 正文容器节点, 并给组件容器节点绑定滚动事件
- init () {
- this.scroll = this.$refs.scroll
- this.scrollWrap = this.scroll.childNodes[0]
- this.scroll.addEventListener('scroll', this.scrollEvent)
- this.$emit('init', this.scroll)
- },
- scrollEvent (e) {
- // 如果数据全部加载完成了, 则再也不触发 loadmore 事件
- if (this.isComplate) return
- let scrollTop = this.scroll.scrollTop
- let scrollH = this.scroll.offsetHeight
- let scrollWrapH = this.scrollWrap.offsetHeight
- // 组件容器滚的距离 + 组件容器本身距离大于或者等于正文容器高度 - 指定数值 则触发 loadmore 事件
- if (scrollTop + scrollH>= scrollWrapH - this.bottomDistance) {
- this.isLoading = true
- }
- },
- // 当前数据加载完成后调用该函数
- loaded () {
- this.isLoading = false
- },
- // 所有数据加载完成后调用该函数
- compleate () {
- this.isLoading = false
- this.isComplate = true
- this.scroll.removeEventListener('scroll', this.scrollEvent)
- }
- },
- mounted () {
- this.$nextTick(this.init)
- }
- }
- </script>
另外该组件中引用到了 loading 小菊花组件, 附录一个小菊花组件代码, 因代码简单故不详细解析:
菊花使用的是一张 gif 图片, 请照一张你喜欢的菊花 gif 放在该菊花组件的路径下
- <template>
- <div class="r-loading-container">
- <img src="./loading.gif">
- </div>
- </template>
- <script>
- export default {}
- </script>
- <style lang="scss">
- .r-loading-container{
- display: inline-block;
- vertical-align: middle;
- img{
- width: 20px;
- height: 20px;
- display: block;
- }
- }
- </style>
是不是很简单!! 我写这个系列的教程就是要告诉大家, 其实写自己的组件很多时候比你使用第三方的组件还简单! 兄弟们很多时候千万不要自己把自己吓倒了.
写在最后
最后这里附录一个使用例子吧:
- <template>
- <div class="index">
- <r-scroll ref="scroll" @loadmore="queryDate">
- <div class="item" v-for="(item, index) in list">{{item}}</div>
- </r-scroll>
- </div>
- </template>
- <script>
- import rScroll from '../../components/scroll'
- function timeout (ms) {
- return new Promise((resolve, reject) => {
- setTimeout(resolve, ms, 'done')
- })
- }
- export default{
- components: {rScroll},
- data () {
- return {
- i: 0,
- list: []
- }
- },
- methods: {
- async queryDate () {
- await timeout(1000)
- let i = this.i
- let data = []
- for (let j = 0; j <40; j++) {
- data.push(i + j)
- this.i = this.i + 1
- }
- this.list = this.list.concat(data)
- // 调用组件中的 loaded 函数, 如果数据加载完成后记得调用组件的 compleate 函数
- this.$refs.scroll.loaded()
- }
- },
- mounted () {
- this.queryDate()
- }
- }
- </script>
- <style lang="scss">
- .item{
- background-color: #f2f2f2;
- border-bottom: 1px solid #fff;
- height: 40px;
- line-height: 40px;
- text-align: center;
- }
- </style>
来源: https://juejin.im/entry/5b0e0156f265da08f665196e