小程序 點擊圖片放大預覽

Banner圖點擊預覽
wxml

<!-- banner -->
<view class='home-banner'>
  <swiper indicator-dots='true' autoplay='{{flag?true:false}}' interval='4000' duration='500' circular='true'>
    <swiper-item wx:for="{{bannerList}}" wx:key="index">
      <image class='home-img' src='{{item.imagePath}}' data-imgPath='{{item.imagePath}}' bindtap='onBannerClick'></image>
    </swiper-item>
  </swiper>
</view>

js

const app = getApp()

Page({
  /**
   * 頁面的初始數據
   */
  data: {
    bannerList: [],
    imgsList: []
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function(options) {
    var that = this

    //取得banner
    wx.request({
        url: "https://www.wanandroid.com/banner/json",
        data: {},
        method: "GET",
        header: {
          'content-type': 'application/x-www-form-urlencoded', // 默認值
        },
        success: (res) =>{
          console.log("succ")
          that.setData({
            bannerList: res.data.data,
          })

          that.getImagelist();
        },
        fail: function(error) {
          console.log("failedsss");
          console.log(error);
        },
        complete: function(res) {
          console.log(res.data)
        }

      }),
  },


  getImagelist() {
    var that = this;
    let imgArray = [];

    const lists = that.data.bannerList;

    for (var pic in lists) {
      imgArray.push(lists[pic].imagePath)
    }

    that.setData({
      imgsList: imgArray
    })

  },


  onBannerClick(e) {
    var that = this
    const imgLink = e.target.dataset.imgpath
    wx.previewImage({
      current: imgLink,//當前顯示圖片的http鏈接
      urls: that.data.imgsList,//需要預覽的圖片http鏈接集合
    })
  }
})

wxss
隨意設置banner大小

.home-banner{
  width: 700rpx;
  height: 300rpx;
}

備註：.js中 e.target.dataset.imgpath中的imgpath與.wxml中 data-imgPath（網址引用玩安卓的資源）