您的当前位置:首页正文

微信小程序--calc无效问题

2024-11-26 来源:个人技术集锦
  • 问题
    在使用scroll-view时,用height: calc(100% - 180rpx);设置高度无效
  • 百度
    在网上查了一下, 基本都是一个办法, 就是给scroll-view加一个父元素, 给父元素设置高度. 但是根据官方文档, scroll-view必须设置height属性才能正确滚动
  • 分析
    其实问题出在了100%, 如果设置为100%, 就会默认用滚动组件中的所有元素把当前页面撑开, 比如每个元素高100rpx, 共有10个, 屏幕高度800rpx, 那么100%=1000rpx, 所以前面的calc计算以后仍然高于屏幕的800rpx, 就好像height设置calc无效一样
  • 解决
    解决办法就是把100%换成100vh, 因为100%取的是整个元素的高度, 100vh是整个平面的高度, 默认情况下没有元素撑开高度的时候, 二者是相等的, 但是像滚动组件这种用100%就不合适, 而100vh不受元素高度影响
  • 注意
    还有人calc没有生效, 是因为没有注意书写要求, calc函数要求:
显示全文