微信小程序（二）微信小程序选择本地图片显示并预览（实现左右滑动）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序（二）微信小程序选择本地图片显示并预览（实现左右滑动）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

创作背景

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

一、选择图片并显示

1、创建页面

这里我直接将我的页面信息展示出来给大家看。附上我的代码
小程序开发,点击获取相册图片,并显示,微信小程序,微信小程序,小程序
就是一个简单的页面的代码其中还隐藏了要显示的image,因为没有值，所以还看不到。
wxml 页面代码

<view class="display_img">
  <block wx:for="{{lista}}">
    <view class="img_size_box">
      <image src="{{item}}" class="img_size" bind:tap="fangda" data-urls="{{lista}}" data-url="{{item}}"></image>
    </view></block>
</view>

<view>
  <button bind:tap="selectPicture">选择图片</button>
</view>

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<res.tempFiles.length;i++){
        list.push(res.tempFiles[i].tempFilePath)
      }
      this.setData({
        lista:list
      })
    }
    })
  }

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

3、显示图片到页面上

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

  <block wx:for="{{lista}}">
    <view class="img_size_box">
      <image src="{{item}}" class="img_size" bind:tap="fangda" data-urls="{{lista}}" data-url="{{item}}"></image>
    </view></block>
</view>

{{lista}}是我们上面设置数据的lista
{{item}}代表lista里面的值
得到的效果如图所示：
小程序开发,点击获取相册图片,并显示,微信小程序,微信小程序,小程序

二、预览图片

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

<image src="{{item}}" class="img_size" bind:tap="fangda" data-urls="{{lista}}" data-url="{{item}}"></image>

绑定点击事件方法名：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里面传递一张图片的路径就行了！