<template>
<view class="container">
<scroll-view :scroll-y="true" class="scroll-view" :scroll-anchoring="true"
@scrolltoupper="clickBtn1" @scrolltolower="clickBtn2">
<view class="msg-item" v-for="(item, index) in msgList" :key="'msg' + item" :id="'msg' + item">{{ item }}</view>
</scroll-view>
<view class="btn" @click="clickBtn1">往上添加</view>
<view class="btn" @click="clickBtn2">往下添加</view>
</view>
</template>
<script>
export default{
data(){
return{
msgList:[100, 101, 102,103,104,105]
}
},
onShow() {
this.msgList=[100, 101, 102,103,104,105];
},
methods:{
clickBtn1() {
let firstNum = this.msgList[0];
for (let i = 1; i <= 3; i++) {
this.msgList.unshift(firstNum - i);
}
},
clickBtn2() {
let lastNum = this.msgList[this.msgList.length - 1];
for (let i = 1; i <= 3; i++) {
this.msgList.push(lastNum + i);
}
}
}
}
</script>
<style lang="scss">
.container {
padding-top: 100rpx;
.scroll-view {
height: 200rpx;
background-color: #dddddd;
overflow-anchor: auto;
-webkit-overflow-anchor: auto;
.msg-item {
margin-left: 20rpx;
}
}
.btn {
width: 150rpx;
height: 50rpx;
background-color: #2b85e4;
margin-top: 50rpx;
color: #ffffff;
} }
</style>
8 个回复
3***@qq.com (作者)
还有，如果使用scroll-into-view滚回来的话，会有闪动，非常不友好，我们是真的面前客户的，不能这样做
3***@qq.com (作者)
这个问题其实卡了我们半年了，如果找不到解决方法可能要考虑其他框架了~
左右摇摆
不会把。我用ios没问题呀
3***@qq.com (作者)
能把大致的源码给我看一下吗？
2021-04-19 18:38
左右摇摆
回复 3***@qq.com: 你用scroll-view 是显示固定宽高吗？ 我列表遍历没有用scroll-view 直接就是数据展示。
2021-04-20 10:04
3***@qq.com (作者)
回复 左右摇摆: 这个肯定有固定高的
2021-04-20 15:06
3***@qq.com (作者)
这是官方给的属性，就是不生效
木杉丶 - 你喜或悲，他也都在那里
是自动滚动的那个情况，然后突然是不是就闪动要不就是不见了要不就是闪的高度有问题那种
3***@qq.com (作者)
就是页面上方加载更多数据后，会自动滚动到最上面
2021-04-20 16:51
3***@qq.com (作者)
唉，官方都没来回复一下么~
Mr小
我采用的是scroll-view倒序加载数据 enable-flex="true" display: flex; flex-direction: column-reverse; 目前的问题是上拉加载触发问题，本来用bindscrolltoupper 但是ios倒叙后scrolltop为负数 一滑动就会触发，然后改成enhanced 增强特性的binddragend滑动监听 scrolltop打印是正的，但是发现ios12无法触发滚动函数，xr可以。
3***@qq.com (作者)
感谢回复，我回去试试
2021-05-11 19:48
Mr小
回复 3***@qq.com: 后来是ios用监听滑动的高度和内容高度是否相等来区别是否滑动到顶部，安卓用scroll-view的触顶函数，现在体验不错。 ----- 一个多月了 想起来来和你说下-----
2021-06-26 11:04
8***@qq.com
大佬，解决了吗