vue项目中vue-scroller实现上拉加载和下拉刷新

vue目前是众所周知的流行框架大家都知道的，vue全家桶的成员是：vue-cli,vuex,vue-router,vue-axios(vue2.0)。然后它的第三方插件也有很多，比如：vue-scroller,vue-lazyload,vue-awesome-swiper等等的。之前我已经给大家介绍过vue-lazyload的用法了，今天就给大家说一下vue-scroller的用法吧。首先在命令行

so12138

6605人浏览 · 2018-07-13 10:22:03

so12138 · 2018-07-13 10:22:03 发布

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 '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>

作者：燕妮666_
链接：https://www.jianshu.com/p/31ad32e7ec13
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^