Vue:无限滚动-通过vant组件
在vant中通过list组件,实现评论列表的无限滚动按需引入组件//可以看 vant官网方法一: src目录下新建 .babelrc 文件,内容如下{"plugins": [["import", {"libraryName": "vant","libraryDirectory": "es","style": true......
·
一: 下拉刷新上拉加载功能
-1. 实现原理:通过vant的List和PullRefresh两个组件实现(PullRefresh组件标签包裹List组件标签)
-2. 我遇到的问题
Load方法触发的次数 | 描述 |
---|---|
页面一加载,触发一次 | 正常 |
页面一加载,触发两次 | offset默认300,说明 滚动条距底部的距离小于300 |
页面一加载,就一直触发的话 | 要保证list组件标签的高度确实继承了父亲的高度(可能存在嵌套这多个盒子,看下图1) |
-3 关于finished属性的
// 该属性决定着, 什么时候,不再触发上拉加载并显示数据到底了
加我weixin,可以帮忙解决
二:评论列表的无限滚动功能
1.实现原理:通过vant的list组件实现
// 实际开发中,评论列表、商品列表、图文详情列表和购物车列表会使用到该无限滚动功能(如果是后台做分页的话。这种接口一般还要传入页码,也可能需要传入一页的条数)
—这些数据都是前端渲染的
下面是无限滚动功能的步骤
- 按需引入组件 //可以看 vant官网 > 快速上手
方法一: src目录下新建 .babelrc 文件,内容如下
// 不写这一步,样式是会不生效的(因为插件默认引入阳样式)
{
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
}
或者根目录下新建 babel.config.js 文件,内容如下
{
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
- 注册组件
在src下 > 新建plugins目录 > 新建文件vant.js ,内容如下
//这个需要在入口文件中导入 如:import ‘./plugins/vant’
import Vue from 'vue'
import { List, Cell } from "vant";
Vue.use(List)
Vue.use(Cell)
或者使用下图的方式 //页面上通过标签<vant-list>来使用组件
4. 这里是单文件组件的内容
更多推荐
已为社区贡献5条内容
所有评论(0)