npm i vue-scroller -s import VueScroller from 'vue-scroller'; Vue.use(VueScroller);
用法:
<template>
<div class="app1">
<div v-bind:class="[loading ? 'main mainIn' : 'main']">
<div class="reload">
<scroller ref="scroller"
:on-refresh="refresh"
:on-infinite="infinite"
:noDataText="loadCompleted"
:refreshText="pull">
<div v-for="item in dataList">
<v-video v-if="item.modelCode === 'video'" :data="item"></v-video>
<one-photo v-if="item.modelCode === 'imageAndText'" :data="item"></one-photo>
<more-photo v-if="item.modelCode === 'moreImageText'" :data="item"></more-photo>
<v-text v-if="item.modelCode === 'text'" :data="item"></v-text>
<Photos v-if="item.modelCode === 'moreImage'" :data="item"></Photos>
<Special v-if="navigationType === 'special'" :data="item"></Special>
</div>
</scroller>
</div>
</div>
</div>
</template>
<script>
import onePhoto from '../common/OnePhoto';
import morePhoto from '../common/MorePhoto';
import vText from '../common/Text';
import vVideo from '../common/Video';
import Photos from '../common/Photos';
import Special from '../common/Special';
export default {
data() {
return {
loading: 0,
page: 0,
rows: 10,
dataList: [],
itemInfo: Number(this.$route.params.id),
navigationType: this.$route.params.type,
pull: this.$lang.pull,
loadCompleted: this.$lang.loadCompleted,
type: 1,
}
},
components:{
onePhoto, morePhoto, vText, vVideo, Photos, Special
},
mounted() {
},
methods: {
refresh(done) {
this.type = 1;
this.getNewsList(done);
},
infinite(done) {
this.type = 2;
this.getNewsList(done);
},
getNewsList(done) {
this.type === 1 ? this.page = 1 : this.page += 1;
let apiFunction = '';
let dataObj = {
categoryId: this.itemInfo,
page: this.page,
pagesize: this.rows,
};
if (this.navigationType === 'special') {
apiFunction = 'special/querySpecialList';
} else if (this.navigationType === 'video') {
dataObj = {
modelCode: 'video',
categoryId: -1,
page: this.page,
pagesize: this.rows,
};
apiFunction = 'news/getNewsPage';
} else {
apiFunction = this.itemInfo === -1 ? 'news/getIndexNewsPage' : 'news/getNewsByCategoryId';
}
this.$http(`${this.$host}/${apiFunction}`, 'get', dataObj)
.then((data) => {
if (data.resCode === 0) {
this.loading = 1;
let dataList = data.data.dataList;
if (!dataList.length) {
this.$refs.scroller.finishInfinite(2);
return;
}
for (let i = 0; i < dataList.length; i++) {
}
if (this.type === 1) {
this.dataList = dataList;
} else {
this.dataList = [...this.dataList, ...dataList];
}
setTimeout(function () {
done();
},1000)
} else {
this.$toast(data.resMsg);
}
});
}
}
}
</script>
<style scoped>
.reload {
height: 100%;
font-size: 0.1rem;
color: #999999;
}
</style>
滚动条组件属性:
属性名称 | 描述 | 需求 | 默认值 |
---|---|---|---|
onRefresh | 下拉刷新回调 | N | - |
onInfinite | 无限加载回调 | N | - |
refreshText | 自定义下拉刷新文字 | N | 下拉刷新 |
noDataText | 自定义没有更多数据文字 | N | 没有更多数据 |
width | 滚动容器宽度 | N | 100% |
height | 滚动容器高度 | N | 100% |
snapping | 加载图标 | N | false |
snappingWidth | 宽度 | N | 100 (stand for 100px) |
snappingHeight | 高度 | N | 100 |
refreshLayerColor | 下拉刷新文字颜色 | N | #AAA |
loadingLayerColor | 无限加载文字颜色 | N | #AAA |
minContentHeight | 滚动条的最小内容高度 (px) | N | 0 |
实例方法:
resize()
(deprecated, cause the scroller's content resizes self automatically)triggerPullToRefresh()
finishPullToRefresh()
终止下拉刷新finishInfinite(isNoMoreData :Boolean)
停止无限加载scrollTo(x:Integer, y:Integer, animate:Boolean)
scrollBy(x:Integer, y:Integer, animate:Boolean)
滚动滚动内容中的位置getPosition :Object
获取滚动内容的当前位置
vue-scroller https://www.npmjs.com/package/vue-scroller(翻译不好,请参考原文api)