微信小程序选择图片并预览（实现左右滑动）

文章目录

微信小程序选择图片并预览（实现左右滑动）创作背景一、选择图片并显示1、创建页面2、选择本地的图片3、显示图片到页面上

二、预览图片1、绑定事件，获得当前图片的url2、调用方法预览图片

创作背景

在微信小程序里面实现选择图片然后预览是一个非常普遍的功能，在我们上传图片文件的时候，都会选择本地的图片进行上传，在上传之前会查看一下自己上传的图片是否准确。所以要做到预览图片。 下面就实现一个简单的本地图片显示预览的功能~~

一、选择图片并显示

1、创建页面

这里我直接将我的页面信息展示出来给大家看。附上我的代码 就是一个简单的页面的代码其中还隐藏了要显示的image,因为没有值，所以还看不到。 wxml 页面代码

wxss样式：

.display_img{

width: 80%;

margin-left: 10%;

margin-top: 20px;

display: flex;

flex-direction: row;

flex-wrap: wrap;

}

.img_size_box{

width: 32%;

height: 100px;

margin: 1px;

overflow: hidden;

text-align: center;

}

.img_size{

text-align: center;

width: 100%;

height: 100%;

object-fit: cover;

}

2、选择本地的图片

点击选择图片按钮，打开媒体选择器 首先，给Button进行事件的绑定，使用bind-tap来进行绑定，给出一个方法名。 然后在js里面实现方法

selectPicture:function(e){

wx.chooseMedia({

count:9,

mediaType:['image','video'],

sourceType:"album",

maxDuration:30,

success:(res)=>{

let i=0;

var list=new Array

for (i;i

list.push(res.tempFiles[i].tempFilePath)

}

this.setData({

lista:list

})

}

})

}

解释： 在选择图片成功后，会返回图片的信息，在这里我们只需要获取图片的路径就行了。 首先我们创建一个数组存放我们所选择图片的路径 var list = new Array 然后得到图片路径放入数组 使用 res.tempFiles[].tempFilePath来得到路径。 最后设置数据给lista。

3、显示图片到页面上

在这里我们使用来遍历显示

{{lista}}是我们上面设置数据的lista {{item}}代表lista里面的值 得到的效果如图所示：

二、预览图片

1、绑定事件，获得当前图片的url

绑定点击事件方法名：dangda(我直接拼音，嘿嘿嘿~~) 在这里我们需要传递回两个参数 一个是当前图片的url(代码中为url) 一个是全部图片的url(代码中为urls)

2、调用方法预览图片

fangda:function(e){

console.log(e.currentTarget.dataset.url)

wx.previewImage({

current:e.currentTarget.dataset.url,

urls: e.currentTarget.dataset.urls,

success:(res)=>{

},

})

}

采用wx.previewImage来进行图片预览 current:是当前显示图片的url urls:是所用的图片地址的数组集合。 当你点击图片，就会显示到你当前的图片，然后左右滑动，就会显示相邻的图片了。 效果如下： 这是向左划。如果你想要只显示当前一张图片，就直接在urls里面传递一张图片的路径就行了！

以上就是全部内容，下期我们将讲一下怎样批量将这些文件上传到我们服务器。 谢谢大家的阅读！如果大家有更好的方法以及问题，可以在评论区告诉我哦！嘿嘿嘿~~ 希望对你有帮助！！！

精彩内容

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。