微信小程序實現相冊展示及圖片預覽

十年河東，十年河西，莫欺少年窮

學無止境，精益求精

廢話不多說，先上效果圖

 

 

 源碼如下：

import * as config from "../../../utils/config/config"
const app = getApp()
import * as request from "../../../utils/request/request.js"

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    isHeightMode: true,
    appId: wx.getStorageSync('appId') || app.globalData.appId,
    imgUrl: config.config.swagger.imgUrl,
    produtctdtl: {},
    yynewspic: [],
    mediaList:[],
    licensePicHidden: true,
    cghtPicHidden: true,
    zfpwPicHidden: true,
    wthtPicHidden: true,
    bossmanPicHidden: true,
    productId: ""
  },


  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    let that = this;
    let pid = options.uid; //
    that.GetProductDtl(pid);
    that.setData({
      productId: pid,
    })
  },


  async GetProductDtl(uid) {
    let that = this;
    let produtctdtl = await request.request({
      url: "/api/Product/ProductDetail?uid=" + uid,
      method: "GET"
    });

    that.setData({
      produtctdtl: produtctdtl.data
    })

    if (produtctdtl.isSuccess && produtctdtl.data.uploads) {
      let yynewspic = produtctdtl.data.uploads.filter(A => A.fileCate == 'yynewspic');
      //
      let mediaList = [];
      for (var i = 0; i < yynewspic.length; i++) {
        let item = {
          url: yynewspic[i].path
        };
        mediaList.push(item)
      }
      that.setData({
        mediaList,

      })
    }
  },
  // 預覽圖片
  previewImage(e) {
    let {
      sources,
      index
    } = e.currentTarget.dataset
    sources.filter(i => {
      i.type = i.type == 2 ? 'video' : 'image'
      i.poster = i.imgUrl
    })
    wx.previewMedia({
      sources,
      current: index
    })
  },

  // 視頻加載完成，改變視頻的寬高
  videometa(e) {
    var that = this;
    //獲取系統信息
    wx.getSystemInfo({
      success(res) {
        //視頻的高
        var height = e.detail.height;

        //視頻的寬
        var width = e.detail.width;

        //算出視頻的比例
        var proportion = height / width;

        //res.windowWidth為手機屏幕的寬。
        var windowWidth = res.windowWidth;

        //算出當前寬度下高度的數值
        height = proportion * windowWidth;
        that.setData({
          height,
          width: windowWidth
        });
      }
    })
  },

  // 圖片加載后判斷圖片寬高比例
  oneImageLoad(e) {
    const {
      width,
      height
    } = e.detail
    height >= width && this.setData({
      isHeightMode: true
    })
  },



  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

wxml

  <!-- 圖片和視頻 -->
  <navigationBar title="市場運營圖片" navigationtype="navigateTo" navigationurl="/pages/product/productDtl/productDtl?uid={{productId}}" hasback="{{true}}"
  bgc="#fff" color="#000"></navigationBar>
  <view class="img_box">
    <view class="many_img">
      <!-- 遍歷 -->
      <view
        wx:for="{{mediaList}}"
        wx:key="index"
        class="img_item many"
      >
      <image 
            class="img"
            src="{{item.url}}"
            bindtap="previewImage"
            data-sources="{{mediaList}}"
            data-index="{{index}}"
            mode="aspectFill"
          ></image>
     
      </view>
    </view>
  </view>

wxss

.img_box {
  margin-bottom: 12rpx;
  background-color: #fff;
  height: 90vh;
}

.many_img {
  display: flex;
  justify-self: start;
  flex-wrap: wrap;
  background-color: #fff;
}

.many {
  width: 45%;
  margin-left: 3%;
  margin-bottom: 16rpx;
  border-radius: 16rpx;
  overflow: hidden;
}

@天才卧龍的博客