cube-ui 结合 vue-cli 实现下拉刷新和上拉加载

使用cube-ui 实现下拉刷新,上拉加载

官方文档: https://didi.github.io/cube-ui/#/zh-CN
cube-ui 是基于 Vue.js 实现的精致移动端组件库。在我们制作移动端页面时能够给予我们很大帮助,详细介绍都在上方的官方文档中,如何安装这里就不再赘述了。
cube-ui 结合 vue-cli 实现下拉刷新和上拉加载_第1张图片

"father"> // 需要给 father 一个固定高度 比如 350px
    "children"> // 要实现滚动,则 children 的高度必须大于350px ... ...

这其中 father 代表容器元素,children 代表内容元素,我们要想实现滚动的话,必须先给 father 一个固定的高度,然后 children 的高度还要大于 father 的高度才可以。

弄清楚原理,我们就上代码了:
在安装配置完 cube-ui 后我们可以全部引入也可以按需引入
全部引入

// main.js
import Vue from 'vue'
import Cube from 'cube-ui'
Vue.use(Cube)

按需引入,注意: 按需引入的话,是不会打包基础样式部分的,所以在使用的时候需要引入 style 模块。

// 在需要引入的页面
import { Style, Button } from 'cube-ui'

引入完成后,实例如下(分开放):

<template> 
    <div class="scroll-list-wrap">
        <cube-scroll ref="scroll" :data="msg" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp">   
            <div class="item" v-for="(item,index) in msg">{{index}}div>    // 自己的内容
        cube-scroll>
    div>
template> 

<script>
    // 见下方
script>

<style lang="scss">
    .scroll-list-wrap{
        height: 350px;

        .item{ padding: 10px 10px;

            &:nth-child(2n+1){ background: #ccc;
            }
        }
    }
style>

首先最外层 div,给一个固定高度,随后引入 cube-scroll, 在放入自己的内容。 cube-scroll 中 ref 用来指向组件,其余属性见下图所示:
cube-ui 结合 vue-cli 实现下拉刷新和上拉加载_第2张图片
data 作为列表渲染的数据,在我实际运用中因为某些需求发现,它可以作为一个在有新数据时是用来表示完成下拉刷新或者上拉加载,这在后面放 js 的时候再说明。
options 中是 better-scroll 的几个配置项,可以选择下拉刷新或上拉加载是否开启。如下所示:
cube-ui 结合 vue-cli 实现下拉刷新和上拉加载_第3张图片
然后就是两个事件 pulling-down 和 pulling-up
js 部分


                    
                    

你可能感兴趣的:(vue-cli,cube-ui,vue下拉刷新,vue上拉加载)