uni-app中scroll-view标签的direction属性滚动不生效，固定高度为窗口高度时，仅修改为scroll-y属性才能实现滚动

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app中scroll-view标签的direction属性滚动不生效，固定高度为窗口高度时，仅修改为scroll-y属性才能实现滚动

滚动视图示例

模板部分

<template>  
  <scroll-view  
    direction="vertical"  
    :style="{ height: windowHeight + 'px', boxSizing: 'border-box' }"  
  >  
    <view class="content-list">  
      <!-- 长内容列表，以确保滚动生效 -->  
      <view  
        v-for="item in items"  
        :key="item"  
        class="content-item"  
      >  
        Item {{ item }}  
      </view>  
    </view>  
  </scroll-view>  
</template>

脚本部分

<script setup>  
import { ref, onMounted } from 'vue'  

// 设置窗口高度  
const { windowHeight } = uni.getSystemInfoSync()  

// 创建内容项以确保有足够的内容可供滚动  
const items = ref([])  
onMounted(() => {  
  // 模拟生成长列表  
  items.value = Array.from({ length: 30 }, (_, i) => i + 1)  
})  
</script>

样式部分

.content-list {  
  /* 设置内容列表的总高度大于窗口高度以确保滚动 */  
  padding: 20px;  
}  

.content-item {  
  height: 100px;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  margin-bottom: 10px;  
  background-color: #e0f7fa;  
  border-radius: 8px;  
  font-size: 18px;  
  color: #00796b;  
}

Harmonyos Next教程
1 回复

在uni-app中，scroll-view 组件的 direction 属性用于指定滚动方向。如果你发现 direction 属性滚动不生效，但修改为 scroll-y 属性可以实现滚动，这通常是因为属性使用不当或布局设置问题。下面是一个简单的代码示例，展示如何正确使用 scroll-view 组件及其 direction 属性。

首先，确保你的页面布局已经正确设置，并且 scroll-view 组件有一个固定的高度。以下是一个基本的示例：

<template>
  <view class="container">
    <scroll-view scroll-y="true" class="scroll-view">
      <!-- 这里使用 scroll-y 作为示例，但你可以根据需要切换为 direction -->
      <view v-for="(item, index) in items" :key="index" class="item">
        {{ item }}
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`)
    };
  }
};
</script>

<style>
.container {
  height: 100vh; /* 设置容器高度为窗口高度 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-view {
  width: 90%; /* 设置宽度 */
  height: 80vh; /* 设置固定高度 */
  border: 1px solid #ccc;
  overflow: hidden; /* 隐藏溢出内容 */
}

.item {
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-bottom: 1px solid #eee;
}
</style>

如果你想要使用 direction 属性来控制滚动方向，可以这样做：

<scroll-view direction="vertical" class="scroll-view">
  <!-- 内容与上面相同 -->
</scroll-view>

或者对于水平滚动：

<scroll-view direction="horizontal" class="scroll-view-horizontal">
  <view v-for="(item, index) in items" :key="index" class="item-horizontal">
    {{ item }}
  </view>
</scroll-view>

<style>
.scroll-view-horizontal {
  width: 100%;
  height: 150px; /* 设置固定高度 */
  white-space: nowrap; /* 防止内容换行 */
}

.item-horizontal {
  display: inline-block;
  width: 200px;
  height: 100%;
  line-height: 150px;
  text-align: center;
  border-right: 1px solid #eee;
  box-sizing: border-box;
}
</style>

确保你的 scroll-view 组件有一个固定的高度（或宽度，取决于滚动方向），并且内容超出了这个尺寸，这样滚动条才会出现。如果 direction 属性仍然不生效，请检查是否有其他CSS样式或父级布局影响了滚动行为。

回到顶部