uni-app scroll-view无效

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

uni-app scroll-view无效

项目信息 详细信息
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
第三方开发者工具版本号 最新
基础库版本号 最新
项目创建方式 CLI
CLI版本号 最新

bug描述：

const image = ref([]);
// 点击上传图片事件
const addImageToList = (sourceType) => {
console.log("被点击了");
uni.chooseImage({
count: 99,
sizeType: ['compressed'],
sourceType: [sourceType],
success: function (res) {
console.log(res);
image.value = [...image.value, ...res.tempFilePaths];
console.log(image.value);
}
});
};
</script>
<template>
<view class="layoutBox">
<uni-section title="不良品" type="line" titleFontSize="24px"></uni-section>
<view class="example">
<uni-forms>
<uni-forms-item label="不良品数量：" required label-width="200">
<uni-easyinput placeholder="0" :inputBorder="false" />
</uni-forms-item>
<uni-forms-item>
<view class="top">
<text>不良品描述</text>
</view>
<view class="bottom">
<uni-easyinput type="textarea" placeholder="无" />
</view>
</uni-forms-item>
<uni-forms-item>
<view class="top">
<text>不良品图片</text>
</view>
<view class="bottom">
<view class="photo" @click="addImageToList('album')">
<uni-icons type="plusempty" size="48"></uni-icons>
<view class="text">上传图片</view>
</view>
<view class="camera" @click="addImageToList('camera')">
<uni-icons type="camera" size="48"></uni-icons>
<view class="text">使用摄像头</view>
</view>
</view>
</uni-forms-item>
<uni-forms-item>
<scroll-view class="scroll" scroll-x v-if="image.length > 0">
<!-- 子元素 -->
<view class="group" v-for="(item, index) in image" :key="index">
<image style="width: 152rpx; height: 152rpx; margin-right: 16rpx;" :src="item" />
</view>
</scroll-view>
</uni-forms-item>
</uni-forms>
</view>
</view>
</template>

.example {
margin: 24rpx 24rpx 0 24rpx;
}

.top {
font-size: 20px;
}

.bottom {
margin-top: 16rpx;
display: flex;
}

.photo,
.camera {
width: 152rpx;
height: 152rpx;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border: 1px solid #dcdcdc;
border-radius: 10rpx;
margin-right: 16rpx;
margin-bottom: 16rpx;
}

.scroll {
border: 1px solid red;
box-sizing: border-box;
height: 152rpx;
}

.group {
white-space: nowrap;
display: inline-block;
}

Harmonyos Next教程
2 回复

你好，可以详细说一下代码要如何操作吗？


在uni-app中，scroll-view组件是用来实现滚动视图的。如果你发现scroll-view无效，可能是由多种原因导致的，比如样式设置不正确、嵌套问题或者内容未超出可视区域等。以下是一些常见的排查方法和相关的代码示例，帮助你定位问题。

1. 基本用法检查

首先确保你的scroll-view组件的基本用法是正确的。以下是一个简单的垂直滚动示例：

<template>
  <view>
    <scroll-view scroll-y="true" style="height: 300px;">
      <view v-for="i in 50" :key="i" style="height: 50px; line-height: 50px;">
        Item {{ i }}
      </view>
    </scroll-view>
  </view>
</template>

在这个例子中，scroll-view的高度被设置为300px，并且启用了垂直滚动（scroll-y="true"）。内部的内容足够高，可以触发滚动。

2. 样式检查

确保scroll-view及其子元素的样式没有导致滚动失效。例如，子元素的高度必须正确设置，且scroll-view本身的高度也需要被明确指定。

/* 样式示例 */
.scroll-view-container {
  height: 100vh; /* 或其他具体高度 */
  overflow: hidden;
}

.scroll-content {
  height: auto; /* 根据内容自动调整 */
}

<template>
  <view class="scroll-view-container">
    <scroll-view class="scroll-view" scroll-y="true">
      <view class="scroll-content">
        <!-- 内容 -->
      </view>
    </scroll-view>
  </view>
</template>

3. 嵌套问题

如果scroll-view嵌套在其他可滚动元素内，可能会导致滚动冲突。检查是否有其他父级元素也设置了滚动属性。

4. 内容未超出可视区域

如果scroll-view的内容没有超出其可视区域，滚动条将不会显示。确保内容足够多，以触发滚动。

5. 动态内容处理

如果内容是动态加载的，确保在内容加载完成后，scroll-view的尺寸已经正确计算。可以使用Vue的nextTick或类似的机制来确保DOM更新完成。

this.$nextTick(() => {
  // 确保DOM更新完成
});

通过上述方法和代码示例，你应该能够定位并解决uni-app中scroll-view无效的问题。如果问题依然存在，建议检查uni-app的官方文档或社区，看看是否有相关的已知问题或更新。

回到顶部