虽然vux官方已经说明scroller不再维护,但是基本上能满足我们的使用场景。
1.我装了mock.js来模拟加载数据,所以没有装mock的同学可以先装一下mock很方便的数据模拟工具:http://mockjs.com/
2.我装了stylus 语法相当自由,同僚们可以装一下,记得装stylus-loader;
3.这个组件是居于vux的,没有用vux框架的可以去了解一下
集成了一下代码,话不多说接下来我就直接贴代码了:
<template>
<div>
<scroller class="scroller" use-pullup :pullup-config="pullupDefaultConfig" @on-pullup-loading="loadMore"
use-pulldown :pulldown-config="pulldownDefaultConfig" @on-pulldown-loading="refresh"
lock-x ref="scrollerBottom" height="-48" v-model="scrollerStatus" >
<div class="scroll-content">
<div class="per-content" v-for="(item, index) in loadList">
<div>测试图片:{{item.id}}</div>
<img :src="item.img" alt="">
</div>
</div>
</scroller>
</div>
</template>
<script type="text/ecmascript-6">
import { Scroller } from 'vux'
const pulldownDefaultConfig = {
content: '下拉刷新',
height: 40,
autoRefresh: true,
downContent: '下拉刷新',
upContent: '释放后刷新',
loadingContent: '正在刷新...',
clsPrefix: 'xs-plugin-pulldown-'
};
const pullupDefaultConfig = {
content: '上拉加载更多',
pullUpHeight: 60,
height: 40,
autoRefresh: true,
downContent: '释放后加载',
upContent: '上拉加载更多',
loadingContent: '加载中...',
clsPrefix: 'xs-plugin-pullup-'
};
export default {
components: {
Scroller
},
mounted() {
// this.$refs.scrollerBottom.reset()
this.$nextTick(() => {
this.$refs.scrollerBottom.reset()//{top: 0}
})
let firstLoad = this.$mock.mock({
// 属性 list 的值是一个数组,其中含有 1 到 10 个元素
'list|10': [{
// 属性 id 是一个自增数,起始值为 1,每次增 1
'id|+1': 1,
'img':this.$mock.Random.image('720x300')+'.png'
}]
});
this.loadList=firstLoad.list
console.log('第一次加载', this.loadList)
},
name: 'HelloWorld',
data() {
return {
loadList:[] ,
pullupDefaultConfig: pullupDefaultConfig,
pulldownDefaultConfig: pulldownDefaultConfig
}
},
methods: {
refresh() {
},
loadMore() {
//mock数据
let loadMoreData= this.$mock.mock({
// 属性 list 的值是一个数组,其中含有 1 到 10 个元素
'list|5': [{
// 属性 id 是一个自增数,起始值为 1,每次增 1
'id|+1': 1,
'img':this.$mock.Random.image('720x300')+'.png'
}]
});
console.log('more',loadMoreData.list)
console.log('concat前', this.loadList.length)
this.loadList=this.loadList.concat(loadMoreData.list);
console.log('concat后', this.loadList.length)
console.log('加载更多后拼接', this.loadList)
this.$refs.scrollerBottom.reset()
this.scrollerStatus.pullupStatus = 'default'
}
},
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.scroller{
/*overflow scroll!important*/
/*-webkit-user-drag overflow !important*/
}
.scroll-content
height 100%
overflow scroll!important
.per-content
padding 10px
img
width: 100%
</style>