uni-app 安卓 list 组件滚动时滚动条长度根据 cell 变化而非 list

uni-app 安卓 list 组件滚动时滚动条长度根据 cell 变化而非 list

开发环境 版本号 项目创建方式
Windows win10 CLI
Android Android 10 -
手机厂商 手机机型 页面类型
小米 小米6 nvue
Vue - vue2
打包方式 - 云端
CLI 2.0.0-31820210406002 -

bug描述：

<template>  
  <view class="chat">  
        <navbar :conversation="currentChatConversation" />  
        <view class="chat__message" :style="`height: ${scrollHeight}px;`">  
            <list show-scrollbar :loadmoreoffset="20" enable-back-to-top class="chat__message--list" @loadmore="onLoadMore" @scroll="scroll">  
                <cell style="height: 20rpx;" />  
                <cell v-for="(item, index) in chatMessage" :key="index" class="chat__message--cell">  
                    <message :message="item" />  
                </cell>  
                <cell ref="scrollBottom" />  
            </list>  
        </view>  
        <ChatFooter  
            ref="chatFooter"  
            @inputHeightSetScrollHeight="inputHeightSetScrollHeight"  
            @sendMessage_text="sendMessage_text"  
        />  
  </view>  
</template>

更多关于uni-app 安卓 list 组件滚动时滚动条长度根据 cell 变化而非 list的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

cell高度越高 滚动条越长 cell高度越小 滚动条越小

更多关于uni-app 安卓 list 组件滚动时滚动条长度根据 cell 变化而非 list的实战教程也可以访问 https://www.itying.com/category-93-b0.html


!

cell的高度不是属于list的一部分么,cell的高度越高滚动条肯定越长啊

你看下我新的评论

这两个图片我是在同一个页面滚动的 cell 高度越高 滚动条越短 cell 高度越小 滚动条越长 而不是根据 list 和父元素的高度来定的


原生既如此 不是bug, 如果很在意可以改为vue

list 旋转 180deg 后 滚动以后松手他就会反方向滚动 因为我旋转了180deg 有什么办法可以解决吗？

回复 大B: 这个情况好像没有好的解决方案 你可以提供demo我们这调研下

回复 DCloud_Android_ST: 下边评论就是这样的

回复 DCloud_Android_ST: iOS 没有问题 安卓有这样的问题。

回复 DCloud_Android_ST: 使用 scroll-view 也是一样的


<template> <list> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> <cell>按时交付技术对接方式决定覅哦就送抵九分</cell> </list> </template> <style> list { transform: rotate(180deg); } cell { transform: rotate(180deg); } </style>

在uni-app的nvue页面中，Android平台的list组件滚动条行为确实与iOS有所不同。根据您描述的问题，Android上list滚动条的长度会根据cell变化而非整个list长度，这是Android原生渲染的特性。

解决方案建议：

  1. 可以尝试在list组件上设置scrollbar-thumb-color和scrollbar-track-color样式属性来自定义滚动条外观，但可能无法直接改变滚动条长度计算方式。

  2. 替代方案是使用scroll-view组件替代list，虽然性能稍差但滚动条行为更可控：

<scroll-view 
  scroll-y 
  :style="`height: ${scrollHeight}px;`"
  [@scrolltolower](/user/scrolltolower)="onLoadMore"
  show-scrollbar>
  <view v-for="(item, index) in chatMessage" :key="index">
    <message :message="item" />
  </view>
</scroll-view>
回到顶部