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>
	</scroll-view>
</view>

data数据模型中，仅提供照片数组，其中前两张是网络图片，其余都是本地图片，谨慎复制：

progress_imgs:['https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2310890073,3469009192&fm=26&gp=0.jpg','https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1999921673,816131569&fm=26&gp=0.jpg','/static/imgs/news_img.png','/static/imgs/index_banner.png','/static/imgs/index_banner.png','../../static/imgs/index_banner.png','/static/imgs/index_banner.png','/static/imgs/index_banner.png','/static/imgs/index_banner.png']

methods中的方法，包含了图片点击预览，以及长按下载的处理操作：

// 图片预览以及长按下载处理
progressImgClick(file_arr){
		let that = this;
		// 图片预览
		uni.previewImage({
			urls: file_arr,
			// 长按图片处理
			longPressActions: {
				itemList: [ '保存图片'],
				success: function(data) {
					// 成功预览后下载图片
					uni.downloadFile({
						// 需要下载的图片路径
						url: that.progress_imgs[data.index],
						success: (res) =>{
							if (res.statusCode === 200){
								// 调用图片保存到相册
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										//uniapp提供的消息提示框。
										uni.showToast({
											title: "保存成功",
											icon: "success"
										});
									},
									fail: function() {
										uni.showToast({
											title: "保存失败，请稍后重试",
											icon: "none"
										});
									}
								});
							}
						}
					})
				},
				fail: function(err) {
					console.log(err.errMsg);
				}
			}
		});
	}

style中的样式处理：scroll-view横向滚动的使用需要注意的点

// 照片
.pic{
	.img_wrapper{
		width: 190upx;
		height:	150upx;
		margin-right: 15upx;
		display: inline-block;
		image{
			width: 100%;
			height:	100%;
		}
	}
}

注意点如下：

• 1.scroll-view组件不需要加宽度，也就是width属性，这样才能根据内容的长度进行自适应，超出长度时才出现滚动条。由于之前我看了一篇文章说是要加宽度，固定宽的话，内容少会出现留白，内容多会出现拥挤，那不是坑我吗。。。。

• 2.scroll-view的子组件view，需要添加display: inline-block;属性，由于view是块元素，为了内容可以在同一行显示，需要加上这个属性。同时在这个标签中设置宽高来限制图片的宽高。

• 3.image标签上的mode不需要设置，因为为了好看所以采用了默认的scaleToFill，同时设置宽高充满父元素即可。