微信小程序-----微信小程序選擇本地圖片顯示並預覽（實現左右滑動）

一、選擇圖片並顯示
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>
1
綁定點擊事件方法名：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裏面傳遞一張圖片的路徑就行了！
————————————————

版權聲明：本文爲博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

原文鏈接：https://blog.csdn.net/qq_67449756/article/details/134495173