-
v-for="(rec, index) in recommend"
:rec = rec
:key="index"
/>
<script>
import {mapState} from 'vuex'
import ShopList from './../../components/ShopList/ShopList'
import BScroll from 'better-scroll';
import {Indicator} from 'mint-ui';
export default {
name: "Recommend",
data(){
return {
page:1,
count:10,
}
},
mounted() {
Indicator.open('正在加载数据...');
this.$store.dispatch('reqRecommend', {
page: this.page, count: this.count, callback: () => {
Indicator.close();
}
});
},
computed:{
...mapState(['recommend'])
},
components: {
ShopList
},
watch: {
recommend() {
this.$nextTick(() => {
// 让当前的页码+1
this.page += 1;
// 初始化
this._initBScroll();
})
}
},
methods:{
_initBScroll() {
// 1.1 初始化
this.listScroll = new BScroll('.recommend_container', {
scrollY: true,
probeType: 2
});
//列表滚动
this.listScroll.on('touchEnd',(pos) => {
//监听下拉
if(pos.y >= 50){
console.log('下拉刷新');
Indicator.open('正在加载数据...');
this.$store.dispatch('reqRecommend', {page: this.page, count: this.count, callback: ()=>{
Indicator.close();
}});
}
//监听上拉
if (this.listScroll.maxScrollY > pos.y + 20) {
Indicator.open('正在加载数据...');
this.$store.dispatch('reqRecommend', {page: this.page, count: this.count, callback: ()=>{
Indicator.close();
}});
}
//列表滚动结束
this.listScroll.on('scrollEnd', () => {
this.listScroll.refresh();
});
})
}
}
}
</script>
``
求大佬们帮解决下,谢谢大佬们