收藏
回答

scroll-view的height根据状态 calc动态计算,导致顶部数据显示不完,也无法下拉

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug scroll-view 微信iOS客户端 8.0.0.42 2.33.0

https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

 <!--消息列表 -->
  <view
    class="box-list-wrap"
    style="height:calc(100% - {{chatInputHeight}}px - {{navigatorNarHeight}}px)"
  >
    <scroll-view class="message-list-wrap" catchtap="scrollViewHandle">
      <messageList
        id="MessageList-component"
        chatInfo="{{chatInfo}}"
        messageList="{{messageList}}"
        bind:messageReceived="messageReceived"
      ></messageList>
    </scroll-view>
  </view>

回答关注问题邀请回答
收藏

1 个回答

  • H1HAO 🇨🇳
    H1HAO 🇨🇳
    2023-09-28

    不是很清楚,你上面减少的变量高度是否正确,建议使用 flex: 1; 自适应高度而不是去用100%去减少其它模块的高度,这样的好处就是你不用去定义其它的元素高度了,完全根据剩余距离撑满


    <view class="" style="display: flex;flex-direction: column;justify-content: space-between;height: 100vh;">
    			<view class="" style="width: 100%;">
    				<!-- 我是顶部无具体高的内容(可动态高度) -->
    			</view>
    			<scroll-view scroll-y style="width: 100%;overflow-y: auto;flex:1">
    				<!-- overflow-y: auto;flex:1;很重要,否则无法滑动和自定义适配高度 -->
    				<!-- 我是无根据其它同级元素自定义适配的高度滑块 -->
    			</scroll-view>
    			<view class="" style="width: 100%;">
    				<!-- 我是底部无具体高的内容(可动态高度) -->
    			</view>
    		</view>
    
    2023-09-28
    有用
    回复
登录 后发表内容