Replies: 2 comments 9 replies
-
|
使用 |
Beta Was this translation helpful? Give feedback.
-
|
加上后，刷新页面直接白屏了 @inottn |
Beta Was this translation helpful? Give feedback.
-
|
父容器需要设置 flex，不是 bug 官方例子： |
Beta Was this translation helpful? Give feedback.
-
|
这样是解决了。但是如果我想限制下滚动列表的高度，该怎么处理呢？ |
Beta Was this translation helpful? Give feedback.
-
|
我知道了，.wallet-record__container这样写就可以了：
|
Beta Was this translation helpful? Give feedback.
-
|
然后我又遇到了新问题，内层元素宽度不是100%，还需要手动覆盖下样式，完整代码如下： <html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,viewport-fit=cover">
<meta name="format-detection" content="telephone=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta http-equiv="pragma" content="no-cache">
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/vant@2.12.54/lib/index.css">
<style>
.wallet-record__container {
height: calc(100% - 32px);
overflow: scroll;
border: 1px solid lightcoral;
}
.wallet-record__list {
display: flex;
background: lightblue;
}
.wallet-record__item {
width: 100%;
}
.wallet-record__vanlist {
width: 100%;
}
.van-pull-refresh {
width: 100%;
}
.van-pull-refresh__track {
width: 100%;
}
</style>
</head>
<body>
<div class="wallet-record__container" id="walletAccountRecord">
<div class="wallet-record__list">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
class="wallet-record__vanlist"
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<!-- <div class="wallet-record__item" v-for="item in list" :key="item">
<span>{{ item }}</span>
</div> -->
<van-cell class="wallet-record__item" v-for="item in list" :key="item" :title="item" />
</van-list>
</van-pull-refresh>
</div>
</div>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/vant@2.12.54/lib/vant.min.js"></script>
<script>
var vm = new Vue({
el: '#walletAccountRecord',
data() {
return {
list: [],
loading: false,
finished: false,
refreshing: false,
};
},
methods: {
onLoad() {
setTimeout(() => {
if (this.refreshing) {
this.list = [];
this.refreshing = false;
}
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}
this.loading = false;
if (this.list.length >= 40) {
this.finished = true;
}
}, 1000);
},
onRefresh() {
// 清空列表数据
this.finished = false;
// 重新加载数据
// 将 loading 设置为 true，表示处于加载状态
this.loading = true;
this.onLoad();
},
}
})
</script>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
-
|
之前我用npm包使用vant的时候没遇到过这个问题，为什么cdn使用时就会有这个问题了呢，感觉很奇怪，下面是之前npm包方式： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="pragma" content="no-cache">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html><template>
<div class="list-wrap">
<div class="list-box">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell v-for="item in list" :key="item" :title="item" />
</van-list>
</van-pull-refresh>
</div>
</div>
</template>
<script>
export default {
data () {
return {
list: [],
loading: false,
finished: false,
refreshing: false
}
},
methods: {
onLoad () {
setTimeout(() => {
if (this.refreshing) {
this.list = []
this.refreshing = false
}
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1)
}
this.loading = false
if (this.list.length >= 40) {
this.finished = true
}
}, 1000)
},
onRefresh () {
// 清空列表数据
this.finished = false
// 重新加载数据
// 将 loading 设置为 true，表示处于加载状态
this.loading = true
this.onLoad()
}
}
}
</script>
<style lang="scss" scoped>
.list-wrap {
height: 100%;
overflow: hidden;
}
.list-box {
height: calc(100% - 50px);
overflow: scroll;
background: lightblue;
border: 1px solid lightcoral;
}
</style> |
Beta Was this translation helpful? Give feedback.
-
|
还有个疑问，为什么滚动和 |
Beta Was this translation helpful? Give feedback.
-
重现链接
https://github.com/yangtoude/vant-list-cannot-scroll
Vant 版本
2.12.54
描述一下你遇到的问题。
在使用下拉刷新的情况下，列表无法滚动
重现步骤
克隆重现仓库，打开其中的html文件
在chrome中，用mobile模式查看即可复现
设备/浏览器
Chrome Version 114.0.5735.198 (Official Build) (x86_64)
Beta Was this translation helpful? Give feedback.
All reactions