vue-cli中vue-scroller的详细用法，上拉加载下拉
2017-08-09 本文已影响26989人
燕妮666_
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 -D
:::!!! -D:就是 --save -dev
然后在你想要用scrolle的那个页面里将咱们刚才下载的东西引入
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
这个插件主要是标签<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; i < start + 10; i++) {
self.moveList.push(i)
}
if(start > 30) {
self.noData = "没有更多数据"
}
self.$refs.myscroller.resize();
done()
}, 1500)
}
//done()表示这次异步加载数据完成，加载下一次
//因为这个是同步的，加了setTimeout就是异步加载数据；
//因为涉及到this指向问题，所以将他放在一个变量里。
refresh() {
console.log('refresh')
}
整体页面分布.png
index.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>
有疑问可以在下面评论问我，
求土豪赞赏小编，小编好可怜的...
