11-条件注释跨端兼容(转自官方文档)

最新推荐文章于 2024-09-25 09:57:31 发布

动力小子

最新推荐文章于 2024-09-25 09:57:31 发布

阅读量69

点赞数

分类专栏： Uni-app 文章标签： uni-app

本文链接：https://blog.csdn.net/wu759782518/article/details/121176624

版权

Uni-app 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文展示了如何在uni-app中实现图片上传和预览功能。通过点击按钮触发uni.chooseImage方法选择图片，利用v-for展示图片列表，并在图片上绑定点击事件调用uni.previewImage进行预览。此外，还展示了条件编译指令，使得部分内容仅在特定平台（如H5或微信小程序）可见。

摘要由CSDN通过智能技术生成

uni-app官网

组件方法样式中都能用

<template>
	<view>
		<button @click="chooseImg">上传图片</button>
		
		<image v-for="(item,index) in imgArr" :src="item" @click="previewImage(item)">
			
		</image>
		<!-- #ifdef H5 -->
		<view>我希望只在h5页面中看见</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view>我希望只在微信小程序中看见</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data(){
			return {
				imgArr:[]
			}
		},
		methods:{
			
			chooseImg(){
				uni.chooseImage({
					count:5,
					success:res=> {
						console.log(res)
						this.imgArr=res.tempFilePaths
					}
				})
			},
			previewImage(current){
				// 预览图片
				uni.previewImage({
					// key和value一样,可以使用下边写法
					current,
					// 需要预览的图片列表
					urls:this.imgArr,
					// 是否可以循环 只会在app起作用
					loop:true,
					// 图片指示器样式 只会在app起作用
					indicator:'number'
				})
			}
		}
		,
		onLoad() {
			// #ifdef H5
			console.log('我希望h5中打印')
			// #endif
			
			// #ifdef MP-WEIXIN
			console.log('我希望微信小程序中打印')
			// #endif
		}
	}
</script>

<style>

</style>