奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > vue项目作品 >

手把手撸vue移动组件: 滑动加载

时间:2018-05-28 17:52来源: 作者:Vuez
在我们移动端还有一个很常用的组件,那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难,其实不是的!!这个组件其实可以很简单的就实现出来,而且体验
在我们移动端还有一个很常用的组件,那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难,其实不是的!!这个组件其实可以很简单的就实现出来,而且体验也能非常的棒(当然我们没有实现下拉刷新功能)!!下面我们就一起来实现这个组件。

使用例子:

<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>


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

交互逻辑分析:

  1. 页面初始化的时候,获取整个组件节点以及正文容器节点
  2. 对整个容器节点进行绑定scroll事件
  3. 容器进行滚动的过程中判断是否距离顶部小于指定数值,如果小于则触发自定义事件loadmore
  4. 业务代码中监听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>
(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
Vuez 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2018-03-30 22:03 最后登录:2018-05-28 17:05

关注奔三路小程序,方便你我他