vue專案中vue-scroller實現上拉載入和下拉重新整理
阿新 • • 發佈：2019-02-14
vue目前是眾所周知的流行框架大家都知道的，vue全家桶的成員是：vue-cli,vuex,vue-router,vue-axios(vue2.0)。然後它的第三方外掛也有很多，比如：vue-scroller,vue-lazyload,vue-awesome-swiper等等的。
之前我已經給大家介紹過vue-lazyload的用法了，今天就給大家說一下vue-scroller的用法吧。
首先在命令列進行npm||cnpm||bower下載
npm install vue-scroller ---save -dev然後在你想要用scrolle的那個頁面裡將咱們剛才下載的東西引入
import Vue from 這個外掛主要是標籤<scroller>,誰需要進行上拉載入下拉重新整理就給誰加。然後裡面有:on-refresh="refresh"&&:on-infinite="infinite" || ref="domName"
ref是獲取dom元素的。this.$refs.myscroller.resize()//重置大小=>myscroller是上面ref定義的dom元素的名字this.$refs.myscroller.finishInfinite(2);//沒有資料時的處理函式
然後在methods物件里加入兩個函式：
infinite()//上拉載入更多refresh()//下拉重新整理infinite(done) {
if(this.noData) {
setTimeout(()=>{
this.$refs.myscroller.finishInfinite(2);
})
return;
}
let self = this;//this指向問題
let start = this.moveList.length;
setTimeout(() => {
for(let i = start + 1 
整體頁面分佈.pngindex.vue//因為我在這個元件裡需要scroller```
<template>
<div class="index-wrapper">
<scroller :on-infinite="infinite" ref="myscroller">
<div class="index-header">
<div class="positionbar">
<div class="position-box">
<i class="icon iconfont icon-dingwei"></i>
<span class="text">
東城區北京市政府
</span>
</div>
<div class="weather-box">
<div class="du">
<h2>28℃</h2>
<p>多雲天</p>
</div>
<img class="could" src="//fuss10.elemecdn.com/2/52/5383cfd55c8ba454449f63f54ce2apng.png?imageMogr/format/webp/thumbnail/!69x69r/gravity/Center/crop/69x69/" alt="">
</div>
</div>
<div class="search-box">
搜尋商家、商品
</div>
<div class="swiper-box">
<div class="swiper-container" id="line-slide">
<div class="swiper-wrapper">
<div class="swiper-slide" style="width:auto">煎餅</div>
<div class="swiper-slide" style="width:auto">蝦飯先生</div>
<div class="swiper-slide" style="width:auto">蛋撻 </div>
<div class="swiper-slide" style="width:auto">立秋進補</div>
<div class="swiper-slide" style="width:auto">我的屏 </div>
<div class="swiper-slide" style="width:auto">鮮榨果汁</div>
<div class="swiper-slide" style="width:auto">石鍋拌飯</div>
<div class="swiper-slide" style="width:auto">黃燜雞</div>
<div class="swiper-slide" style="width:auto">蝦</div>
</div>
<!-- 如果需要滾動條 -->
<div class="swiper-scrollbar"></div>
</div>
</div>
</div>
<div class="slide-box">
<div class="swiper-container" id="button-menu">
<div class="swiper-wrapper">
<div class="swiper-slide">
<ul class="btn-group">
<li>
<a href="javascript:;">
<img src="//fuss10.elemecdn.com/b/7e/d1890cf73ae6f2adb97caa39de7fcjpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
<span>美食</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//fuss10.elemecdn.com/2/35/696aa5cf9820adada9b11a3d14bf5jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
<span>甜品飲品</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//fuss10.elemecdn.com/0/da/f42235e6929a5cb0e7013115ce78djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
<span>商超便利</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//fuss10.elemecdn.com/d/49/7757ff22e8ab28e7dfa5f7e2c2692jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
<span>預定早餐</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//fuss10.elemecdn.com/c/db/d20d49e5029281b9b73db1c5ec6f9jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
<span>果蔬生鮮</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//fuss10.elemecdn.com/a/fa/d41b04d520d445dc5de42dae9a384jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
<span>新店特惠</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//fuss10.elemecdn.com/3/84/8e031bf7b3c036b4ec19edff16e46jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
<span>準時達</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//fuss10.elemecdn.com/d/38/7bddb07503aea4b711236348e2632jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
<span>午餐</span>
</a>
</li>
</ul>
</div>
<div class="swiper-slide">
<ul class="btn-group">
<li>
<a href="javascript:;">
<img src="//fuss10.elemecdn.com/b/7f/432619fb21a40b05cd25d11eca02djpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
<span>漢堡薯條</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//fuss10.elemecdn.com/2/17/244241b514affc0f12f4168cf6628jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
<span>包子粥店</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//fuss10.elemecdn.com/8/83/171fd98b85dee3b3f4243b7459b48jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
<span>鮮花蛋糕</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//fuss10.elemecdn.com/3/c7/a9ef469a12e7a596b559145b87f09jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
<span>麻辣燙</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//fuss10.elemecdn.com/a/8a/ec21096d528b7cfd23cdd894f01c6jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
<span>地方菜系</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//fuss10.elemecdn.com/7/b6/235761e50d391445f021922b71789jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
<span>披薩意麵</span>
</a>
</li>
<li>
<a href="javascript:;">
<img src="//fuss10.elemecdn.com/6/d2/de0683a49a0655c728b70fdb344d5jpeg.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/" alt="">
<span>異國料理</span>
</a>
</li>
</ul>
</div>
</div>
<!-- 如果需要分頁器 -->
<div class="swiper-pagination"></div>
</div>
</div>
<div class="shop-box">
<ul>
<li v-for="m in movieList">
<h4>{{m}}</h4>
</li>
</ul>
</div>
</scroller>
<footerbar></footerbar>
</div>
</template>
<script>
import Vue from 'vue'
import VueScroller from 'vue-scroller'
import footerbar from '@/components/footerbar'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueScroller);
export default {
data() {
return {
noData: '',
moveList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
}
},
components: {
footerbar
},
mounted() {
var mySwiper = new Swiper('#line-slide', {
slidesPerView: 6,
scrollbar: '.swiper-scrollbar',
slidesPerView: 'auto'
})
var menuSwiper = new Swiper('#button-menu', {
direction: 'horizontal',
loop: true,
// 如果需要分頁器
pagination: '.swiper-pagination',
// 如果需要前進後退按鈕
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
})
},
methods: {
infinite(done) {
console.log(this.noData)
if(this.noData) {
setTimeout(()=>{
this.$refs.myscroller.finishInfinite(2);
})
return;
}
let self = this;
let start = this.moveList.length;
setTimeout(() => {
for(let i = start + 1; i < start + 10; i++) {
self.moveList.push(i)
}
if(start > 30) {
self.noData = "沒有更多資料"
}
self.$refs.myscroller.resize();
done()
}, 1500)
},
refresh() {
console.log('refresh')
}
}
}
</script>
<style lang="less">
@import '../../static/less/var.less';
.index-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: @base*100rem;
background: #F5F5F5;
.index-header {
background: @mc;
height: @base*204rem;
padding: @base*20rem @base*28rem;
}
.positionbar {
height: @base*69rem;
display: flex;
justify-content: space-between;
color: #fff;
.position-box {
line-height: @base*69rem;
width: @base*417rem;
}
.weather-box {
width: @base*136rem;
display: flex;
.du {
/*border:1px solid;*/
width: @base*90rem;
height: @base*69rem;
h2 {
font-size: @base*18rem;
margin: 0;
}
p {
margin: 0;
padding: 0;
font-size: @base*14rem;
}
}
.could {
display: block;
width: @base*50rem;
height: @base*70rem;
}
}
}
.search-box {
height: @base*70rem;
margin: @base*15rem;
padding: @base*1rem;
color: @fc1;
text-align: center;
background: #fff;
border-radius: 20px;
line-height: @base*70rem;
font-size: @base*20rem;
}
#line-slide {
overflow: hidden;
color: #fff;
.swiper-slide {
margin-right: @base*20rem;
font-size: @base*20rem;
text-align: center;
a {
color: #fff;
}
}
}
}
.slide-box {
background: #fff;
height: @base*354rem;
.swiper-slide {
height: @base*354rem;
}
.swiper-pagination-bullet-active {
background: #000;
opacity: 0.6;
}
ul {
padding: @base*10rem 0;
display: flex;
flex-wrap: wrap;
li {
padding: @base*10rem 0;
width: 25%;
text-align: center;
a {
display: inline-block;
text-align: center;
width: 100%;
height: 100%;
color: #666;
text-decoration: none;
img {
display: block;
margin-left: 25%;
width: 50%;
height: 50%;
}
span {
font-size: @base*16rem;
}
}
}
}
}
</style>