vue移动UI框架滑动加载数据的方法
前言在我们移动端还有一个很常用的组件,那就是滑动加载更多组件。平常我们看到的很多插件实现相当复杂就觉得这个组件很难,其实不是的!!这个组件其实可以很简单的就实现出来,而且体验也能非常的棒(当然我们没有实现下拉刷新功能)!!下面我们就一起来实现这个组件。 效果展示先上一个gif图片展示我们做成后的效果,如下: DOM结构页面应该包含三个部分:1. 正文区域 2.加载小菊花以及记载文字 3.所有数据加载完成后的文字: css样式整个组件的容器r-scroll应该是固定宽度,超出部分可以滚动的;正文区域应该是随着内容,高度自动增长的;加载小菊花在滚动距离底部默认数值的时候显示;所有数据加载完成后显示数据加载完成文字: .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; } } } javascript交互逻辑分析:
因为代码不复杂,故不详细解析,大家看下代码注释,如有不清楚的请在评论中发表评论:
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)
}
}
另外该组件中引用到了loading小菊花组件,附录一个小菊花组件代码,因代码简单故不详细解析: 菊花使用的是一张gif图片,请照一张你喜欢的菊花gif放在该菊花组件的路径下 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |