收藏
回答

scroll-view给出百分比高度为什么没有反应?

我想用小程序写一个音乐播放的界面,其中歌词滚动这一块单独包装了组件。其中scroll-view给出70%的高度并没有反应,歌词甚至翻到了第二页,引用这个的页面,这一块没什么样式限制。现在的截图如下,我希望把歌词保持在黄色框内,谢谢围观和意见!

components/lyric/lyric.wxml:

<scroll-view hidden="{{isLyricShow}}" class="lyric-scroll" scroll-y scroll-top="{{scrollTop}}" scroll-with-animation="true">
  <view class="lyric-panel">
    <block wx:for="{{lrcList}}" wx:key="item">
      <view class="lyric {{index == nowLyricIndex?'hightlight-lyric': ''}}">{{item.lrc}}</view>
    </block>
  </view>
</scroll-view>

components/lyric/lyric.wxml:

.lyric-scroll {
  width: 100%;
  height: 70%;
  color: #ccc;
  font-size: 32rpx;
}


.lyric-panel {
  position: relative;
  top: 50%;
}


.lyric {
  min-height: 64rpx;
}


.hightlight-lyric {
  color: #d43c33;
}


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

2 个回答

  • 拾忆
    拾忆
    2020-12-26

    建议高度用 vh

    2020-12-26
    有用 2
    回复 1
    • Eichner
      Eichner
      2020-12-28
      用vh确实可以解决问题,非常感谢!
      2020-12-28
      回复
  • hixiaohuzai
    hixiaohuzai
    2020-12-28

    height写在内联样式试试

    2020-12-28
    有用
    回复
登录 后发表内容
问题标签