一、效果图
二、注意要点
- 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,同时设置宽高充满父元素即可。