uniapp中使用scroll-view实现图片滑动效果（含点击预览以及长按下载操作）

一羊迁徙

于 2020-08-15 12:04:58 发布

阅读量5.6k

点赞数 2

分类专栏： uniapp 文章标签： app vue html javascript

本文链接：https://blog.youkuaiyun.com/weixin_43242112/article/details/108020263

版权

本文介绍了如何在uniapp中利用scroll-view组件创建图片滑动效果，包括点击预览和长按下载功能。关键点包括使用网络图片、设置scroll-view宽度为auto、以及在view中设定图片样式。代码示例展示了具体实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

uniapp中使用scroll-view实现图片滑动效果（含点击预览以及长按下载操作）

一、效果图

在这里插入图片描述

二、注意要点

1.在真机模拟时，本地图片不支持下载，可以使用百度上的网络图。
2.如果是图片，建议使用绝对路径。使用/代表项目的根目录。
3.如果是微信小程序调试，不支持本地图片的预览。

三、代码

template模板中：

<!-- 照片 -->
<view style="margin-top: 20upx;">
	<scroll-view scroll-x="true" class="pic" style="width: 100%;overflow:hidden;white-space:nowrap;">
		<view class="img_wrapper" v-for="(item,index) in progress_imgs" :key="index"><image @click="progressImgClick(progress_imgs)" :src="item"/></view>

最低0.47元/天解锁文章