使用cube-ui 实现下拉刷新,上拉加载
官方文档: https://didi.github.io/cube-ui/#/zh-CN
cube-ui 是基于 Vue.js 实现的精致移动端组件库。在我们制作移动端页面时能够给予我们很大帮助,详细介绍都在上方的官方文档中,如何安装这里就不再赘述了。
<div class="father"> // 需要给 father 一个固定高度 比如 350px
<ul class="children"> // 要实现滚动,则 children 的高度必须大于350px
...
...
</ul>
</div
这其中 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=