无效
- 发布:2024-09-20 11:16
- 更新:2024-09-20 11:53
- 阅读:75
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win11
第三方开发者工具版本号: 最新
基础库版本号: 最新
项目创建方式: CLI
CLI版本号: 最新
示例代码:
操作步骤:
无效
无效
预期结果:
无效
无效
实际结果:
无效
无效
bug描述:
<script setup>
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>
<style lang="scss" scoped>
.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;
}
}
</style>
1 个回复
DCloud_UNI_yuhe
你好,可以详细说一下代码要如何操作吗?