滑动加载怎么做 php,vue之UI框架如何实现滑动加载数据
在我們移動端還有一個很常用的組件，那就是滑動加載更多組件。平常我們看到的很多插件實現(xiàn)相當復雜就覺得這個組件很難，其實不是的！！這個組件其實可以很簡單的就實現(xiàn)出來，而且體驗也能非常的棒(當然我們沒有實現(xiàn)下拉刷新功能)！！下面我們就一起來實現(xiàn)這個組件。
效果展示
先上一個gif圖片展示我們做成后的效果，如下：
DOM結(jié)構(gòu)
頁面應該包含三個部分：1. 正文區(qū)域 2.加載小菊花以及記載文字 3.所有數(shù)據(jù)加載完成后的文字：
{{loadingText}}
{{complateText}}
css樣式
整個組件的容器r-scroll應該是固定寬度，超出部分可以滾動的；正文區(qū)域應該是隨著內(nèi)容，高度自動增長的；加載小菊花在滾動距離底部默認數(shù)值的時候顯示；所有數(shù)據(jù)加載完成后顯示數(shù)據(jù)加載完成文字：
@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;
}
}
}
javascript
交互邏輯分析：頁面初始化的時候，獲取整個組件節(jié)點以及正文容器節(jié)點
對整個容器節(jié)點進行綁定scroll事件
容器進行滾動的過程中判斷是否距離頂部小于指定數(shù)值，如果小于則觸發(fā)自定義事件loadmore
業(yè)務代碼中監(jiān)聽loadmore事件，如果觸發(fā)則加載數(shù)據(jù)
因為代碼不復雜，故不詳細解析，大家看下代碼注釋，如有不清楚的請在評論中發(fā)表評論：
import rLoading from '../loading'
export default{
components: {rLoading},
props: {
// 距離底部數(shù)值，小于或等于該數(shù)值觸發(fā)自定義事件loadmore
bottomDistance: {
type: [Number, String],
default: 70
},
// 加載中的文字
loadingText: {
type: String,
default: '加載中...'
},
// 數(shù)據(jù)加載完成的文字
complateText: {
type: String,
default: '-- 我是個有底線的列表 --'
}
},
data () {
return {
// 用來判定數(shù)據(jù)是否加載完成
isComplate: false,
// 用來判定是否正在加載數(shù)據(jù)
isLoading: false,
// 組件容器
scroll: null,
// 正文容器
scrollWrap: null
}
},
watch: {
// 監(jiān)聽isLoading，如果isLoading的值為true則代表觸發(fā)了loadmore事件
isLoading (val) {
if (val) {
this.$emit('loadmore')
}
}
},
methods: {
// 初始化組件，獲取組件容器、正文容器節(jié)點，并給組件容器節(jié)點綁定滾動事件
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) {
// 如果數(shù)據(jù)全部加載完成了，則再也不觸發(fā)loadmore事件
if (this.isComplate) return
let scrollTop = this.scroll.scrollTop
let scrollH = this.scroll.offsetHeight
let scrollWrapH = this.scrollWrap.offsetHeight
// 組件容器滾的距離 + 組件容器本身距離大于或者等于正文容器高度 - 指定數(shù)值 則觸發(fā)loadmore事件
if (scrollTop + scrollH >= scrollWrapH - this.bottomDistance) {
this.isLoading = true
}
},
// 當前數(shù)據(jù)加載完成后調(diào)用該函數(shù)
loaded () {
this.isLoading = false
},
// 所有數(shù)據(jù)加載完成后調(diào)用該函數(shù)
compleate () {
this.isLoading = false
this.isComplate = true
this.scroll.removeEventListener('scroll', this.scrollEvent)
}
},
mounted () {
this.$nextTick(this.init)
}
}
另外該組件中引用到了loading小菊花組件，附錄一個小菊花組件代碼，因代碼簡單故不詳細解析：
菊花使用的是一張gif圖片，請照一張你喜歡的菊花gif放在該菊花組件的路徑下
export default {}
.r-loading-container{
display: inline-block;
vertical-align: middle;
img{
width: 20px;
height: 20px;
display: block;
}
}
寫在最后
最后這里附錄一個使用例子吧：
{{item}}
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)
// 調(diào)用組件中的loaded函數(shù)，如果數(shù)據(jù)加載完成后記得調(diào)用組件的compleate函數(shù)
this.$refs.scroll.loaded()
}
},
mounted () {
this.queryDate()
}
}
.item{
background-color: #f2f2f2;
border-bottom: 1px solid #fff;
height: 40px;
line-height: 40px;
text-align: center;
}
相關推薦：
總結(jié)
以上是生活随笔為你收集整理的滑动加载怎么做 php,vue之UI框架如何实现滑动加载数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySql 创建utf-8格式的数据库
- 下一篇： 动态规划算法php,php算法学习之动态