微信小程序：选择本地图片显示并预览
在微信小程序中，实现选择本地图片显示并预览是一个非常常见的功能。用户通常会选择本地的图片进行上传或预览，在上传之前会查看一下自己上传的图片是否准确。如果你想要只显示当前一张图片，就直接在urls数组中传入该图片的路径即可。
实现步骤
1. 选择本地图片
首先，我们需要让用户能够选择本地的图片。我们可以使用微信小程序提供的`chooseImage` API来实现这一点。
```javascript//选择本地图片const chooseImage = async () => {
const res = await wx.chooseImage({
count:1, // 只允许选择一张图片 sizeType: ['original'], // 只允许选择原图 sourceType: ['album'] // 从相册中选择 })
console.log(res)
}
```
2. 预览选中的图片
在用户选择了本地的图片之后，我们需要将其显示出来并进行预览。我们可以使用微信小程序提供的`previewImage` API来实现这一点。
```javascript// 预览选中的图片const previewImage = async () => {
const res = await wx.previewImage({
current: ' // 当前显示的图片路径 urls: [' ' // 所有要预览的图片路径 })
console.log(res)
}
```
3. 实现左右滑动
为了实现左右滑动，我们需要在`previewImage`函数中使用微信小程序提供的`slider`组件。
```javascript// 实现左右滑动const slider = new wx.Slider({
value:0, // 初始值为0 min: -1, // 最小值为-1 max:1 // 最大值为1})
```
4. 绑定事件
最后，我们需要将`slider`组件的值绑定到`previewImage`函数中，以实现左右滑动。
```javascript// 绑定事件slider.on('change', async (e) => {
const value = e.detail.value await wx.previewImage({
current: ' // 当前显示的图片路径 urls: [' ' // 所有要预览的图片路径 })
})
```
完整代码
```javascript//选择本地图片const chooseImage = async () => {
const res = await wx.chooseImage({
count:1, // 只允许选择一张图片 sizeType: ['original'], // 只允许选择原图 sourceType: ['album'] // 从相册中选择 })
console.log(res)
}
// 预览选中的图片const previewImage = async () => {
const res = await wx.previewImage({
current: ' // 当前显示的图片路径 urls: [' ' // 所有要预览的图片路径 })
console.log(res)
}
// 实现左右滑动const slider = new wx.Slider({
value:0, // 初始值为0 min: -1, // 最小值为-1 max:1 // 最大值为1})
// 绑定事件slider.on('change', async (e) => {
const value = e.detail.value await wx.previewImage({
current: ' // 当前显示的图片路径 urls: [' ' // 所有要预览的图片路径 })
})
```
注意
在使用微信小程序提供的`chooseImage`和`previewImage` API时，请确保你已经在`app.json`文件中配置了相应的权限。
