html 引入vue,vant/ list列表组件，下拉没反应
如图，
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">
<style type="text/css">
#app {
}
.test{
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 33px;
}
</style>
</head>
<body>
<div id="app">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<div class="test" v-for="item in list"
:key="item"
:title="item">
{{item}}
</div>
</van-list>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>
<script type="text/javascript">
let vm = new Vue({
el:'#app',
data:{
count: 0,
isLoading: false,
list: [],
loading: false,
finished: false
},
methods:{
onLoad() {
// 异步更新数据
setTimeout(() => {
for (let i = 0; i < 16; i++) {
this.list.push(this.list.length + 1);
}
// 加载状态结束
this.loading = false;
// 数据全部加载完成
if (this.list.length >= 60) {
this.finished = true;
}
}, 500);
},
}
});
</script>html 引入vue,vant/ list列表组件，下拉没反应，上拉有效果。。。
各位大佬，这是怎么回事呢，提供下写法>_<
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
你没有把vant-list注册到vue中,我忘记了还有一个组件需要搭配一起实用
https://youzan.github.io/vant/#/zh-CN/pull-refresh