vue-cli中vue-scroller的详细用法，上拉加载下拉刷新,vue-axios获取数据的详细过程

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>