uni-app 页面<style>使用lang="scss"时 整个页面将不能滚动

uni-app 页面<style>使用lang="scss"时 整个页面将不能滚动

测试过的手机

苹果11 版本14
安卓 荣耀系列
其他机型没有测试 应该都不可以

示例代码

<template>  
    <scroll-view scroll-y="true" style="height: 100vh;" >  
    <view class="list-item-text">  
      <text>1</text>  
    </view>  
    <view class="list-item-text">  
      <text>2</text>  
    </view>  

  </scroll-view>  
</template>  

<script>  
    export default {  
        data() {  
            return {}  
        },  
        methods: {}  
    }  
</script>  

<style scoped lang="scss">  
  .list-item-text{  
    background: red;  
    height: 100vh;  
    border-bottom: 30rpx solid #333;  
    color:$uni-color-primary ;  
  }  
</style>

操作步骤

  • style 如果删掉scoped lang=“scss” 则功能恢复

预期结果

  • 当页面<style>使用lang="scss"时 整个页面将不能滚动
  • 希望页面内可以正常使用

实际结果

  • style 如果删掉scoped lang=“scss” 则功能恢复

bug描述

  • 当页面<style>使用lang="scss"时 整个页面将不能滚动
  • style 如果删掉scoped lang=“scss” 则功能恢复

更多关于uni-app 页面<style>使用lang="scss"时 整个页面将不能滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

未复现您说的问题。用其他设备再测试看看

更多关于uni-app 页面<style>使用lang="scss"时 整个页面将不能滚动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


H5和小程序都没有问题 只有链接真机调试app的时候这样

回复 1***@163.com: 更新到最新版本HBuilderX3.2.10.20211013-alpha，是否还有此问题？

这个问题是由于在 uni-app 中使用 lang="scss" 时，SCSS 变量 $uni-color-primary 未定义导致的编译错误，进而影响了页面样式和滚动功能。

问题分析：

  1. SCSS 变量未定义：在您的代码中使用了 $uni-color-primary 这个 SCSS 变量，但该变量在页面作用域内并未定义。这会导致 SCSS 编译失败，从而影响整个 <style> 块的生效。

  2. 样式失效导致布局问题：当 SCSS 编译失败时，整个 <style> 块可能无法正确应用，包括 .list-item-text 的高度设置。这可能导致 scroll-view 的内容高度计算异常，从而无法滚动。

解决方案：

  1. 定义 SCSS 变量：在使用 $uni-color-primary 之前，需要先定义这个变量。您可以在 uni.scss 全局文件中定义，或者在当前页面的 <style> 块顶部定义：

    <style scoped lang="scss">
$uni-color-primary: #007aff; // 示例颜色值，请根据实际需求调整

.list-item-text {
  background: red;
  height: 100vh;
  border-bottom: 30rpx solid #333;
  color: $uni-color-primary;
}
</style>

  2. 检查 uni.scss 全局配置：如果您期望使用全局的 $uni-color-primary 变量，请确保在项目的 uni.scss 文件中已经正确定义了该变量。

  3. 使用 CSS 替代方案：如果不需要 SCSS 变量功能，可以直接使用具体的颜色值：

    <style scoped>
.list-item-text {
  background: red;
  height: 100vh;
  border-bottom: 30rpx solid #333;
  color: #007aff; /* 直接使用颜色值 */
}
</style>
回到顶部