WeChat applet-picture preview

Sometimes the pictures in the picture list are too small to see the content of the picture clearly. At this time, we generally hope to click on the picture to zoom in and display it for preview. Then, we will call the picture browsing program of WeChat's native API to realize the picture preview.

Single image preview

Browsing a single image through WeChat native API

wxml code

<image src="https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg" bindtap="preview" mode=""/>

Add the click event corresponding to js, ​​call the API of the preview image, and realize the preview of the image

  preview(){
    wx.previewImage({
      current: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',//当前的图片路径
      urls: [ // 所有图片的URL列表，数组格式   预览图片路径
       'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg'
      ],
      success: function(res) {
        console.log(res)
      }
    })
  },

Picture list preview

By reading the data in data, it is displayed in the form of a picture list, click on the picture to display the preview

The wxml code is as follows:

 Corresponding js code:

Data imgList in data:

imgList:[
      {
        id:1,
        url: 'https://img1.gtimg.com/10/1048/104857/10485731_980x1200_0.jpg',
        title:"图片1"
      },
      {
        id:2,
        url: 'https://img1.gtimg.com/10/1048/104857/10485729_980x1200_0.jpg',
        title:"图片2"
      },
      {
        id:3,
        url: 'https://img1.gtimg.com/10/1048/104857/10485726_980x1200_0.jpg',
        title:"图片3"
      }
    ]

Carousel preview

Use the same data as the picture list data, the following is the preview picture of the carousel

wxml interface:

<view class="container">
  <swiper indicator-dots="{
   
   {true}}" 	indicator-color="#fff" indicator-active-color="#f00" autoplay="{
   
   {true}}" interval="3000" duration="500" circular="{
   
   {true}}" vertical="{
   
   {false}}">
        <block wx:for="{
   
   {imgList}}" wx:key="*this" >
          <swiper-item>
            <view class="swiper-item {
   
   {item}}">
            <image src="{
   
   {item.url}}" mode="" bindtap="preview" data-idx="{
   
   {index}}"/>
            </view>
          </swiper-item>
        </block>
      </swiper>
</view>

Corresponding js content

 preview(event){
    // console.log(event);
    let idx=event.currentTarget.dataset.idx;
    let imgArr=[];
    this.data.imgList.forEach(item=> {
      imgArr.push(item.url);
    })
    wx.previewImage({
      current: this.data.imgList[idx].url,//当前的图片路径
      urls: imgArr, // 所有图片的URL列表，数组格式   预览图片路径
      success: function(res) {
        console.log(res)
      }
    })
  },

 Effect: