<scroll-view
scroll-y="true"
class="chat-scroll"
:scroll-top="scrollTop"
:scroll-with-animation="true"
@scroll="fnScroll"
>
<view class="chat-msg-list">
<view class="chat-msg-ctn">
<view class="msg-ctn flex-r-e" v-for="item in msgList">
<view class="msg-content-ctn msg-self">
<view class="msg-content self-content">123</view>
</view>
</view>
</view>
</view>
</scroll-view>
<view class="consult-finish-ctn" @click="fnFinish">结束</view>
export default {
onLoad(){
},
data(){
return{
scrollTop:0,
msgList:5
}
},
methods:{
fnGetMsgHeight(){
let query = uni.createSelectorQuery();
query.select('.chat-msg-list').boundingClientRect(res => {
let height = res.height
this.scrollTop = height
}).exec();
},
fnFinish(){
this.msgList = 20
this.fnGetMsgHeight()
}
}
}
.chat-scroll{
width:100%;
height: calc(100vh - 402rpx);
margin-top: 290rpx;
.chat-msg-list{
width:100%;
.chat-msg-ctn{
width:100%;
padding:0 40rpx;
.msg-ctn{
width:100%;
margin-bottom: 30rpx;
.msg-content-ctn{
max-width:466rpx;
padding:23rpx;
border-radius: 12rpx;
position: relative;
.msg-content{
font-size: 30rpx;
line-height: 36rpx
}
.self-content{
color:#fff
}
.friend-content{
color:#333
}
}
.msg-self{
background: #4166F7;
margin-right: 30rpx;
}
.msg-friend{
background: #fff;
margin-left: 30rpx;
}
}
}
}
}
.consult-finish-ctn{
width: 108rpx;
height: 108rpx;
background: #7590F9;
border-radius: 50%;
position: fixed;
right:30rpx;
bottom:187rpx;
text-align: center;
line-height: 108rpx;
color: #fff;
font-size: 30rpx;
}

- 发布:2021-11-22 15:13
- 更新:2021-11-22 15:40
- 阅读:358
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win7
HBuilderX类型: 正式
HBuilderX版本号: 3.2.15
第三方开发者工具版本号: 1.05.2110290
基础库版本号: 2.21.0
项目创建方式: HBuilderX
示例代码:
操作步骤:
先点击结束按钮,会滚动到页面底部,手动将页面滚回顶部,再次点击结束按钮,页面无法再滚动到最底部
先点击结束按钮,会滚动到页面底部,手动将页面滚回顶部,再次点击结束按钮,页面无法再滚动到最底部
预期结果:
预期结果,手动滚回顶部后,再次点击结束按钮扔能滚动到最底部(小程序官方语言是可以实现)
预期结果,手动滚回顶部后,再次点击结束按钮扔能滚动到最底部(小程序官方语言是可以实现)
实际结果:
手动滚回顶部后,再次点击结束按钮无法实现滚动
手动滚回顶部后,再次点击结束按钮无法实现滚动
bug描述:
scroll-view组件的scroll-top属性在使用滚动到底部之后,元素高度没有改变,手动将页面滚回顶部,再次用事件触发滚动到底部不生效
1 个回复
DCloud_UNI_GSQ
vue 的观测限制,看下 scroll-view 文档也有说明和解决方案。