添加图片预览

miniprogram/pages/index/index.ts

@@ -11,6 +11,19 @@ Page({
    * 页面的初始数据
    */
   data: {
+    imgList: [
+      'https://oss.dayaedu.com/ktyq/1731664204915.png',
+      'https://oss.dayaedu.com/ktyq/1731664238525.png',
+      'https://oss.dayaedu.com/ktyq/1731664250837.png',
+      'https://oss.dayaedu.com/ktyq/1731664259087.png',
+      'https://oss.dayaedu.com/ktyq/1731664269098.png',
+    ],
+    goodsImgList: [
+      'https://oss.dayaedu.com/ktyq/1731664304424.png',
+      'https://oss.dayaedu.com/ktyq/1731664318588.png',
+      'https://oss.dayaedu.com/ktyq/1731664330981.png',
+      'https://oss.dayaedu.com/ktyq/1732085582320.png'
+    ],
     current: 0,
     autoplay: false,
     interval: 5000,
@@ -174,6 +187,24 @@ Page({
       })
     }, 500)()
   },
+  onPreivewBannerImg(e: { currentTarget: { dataset: any } }) {
+    wx.previewImage({
+      current: e.currentTarget.dataset.src,
+      urls: this.data.imgList
+    })
+  },
+  onPreivewGoodsImg(e: { currentTarget: { dataset: any } }) {
+    wx.previewImage({
+      current: e.currentTarget.dataset.src,
+      urls: this.data.goodsImgList
+    })
+  },
+  onPreivewGoods(e: { currentTarget: { dataset: any } }) {
+    wx.previewImage({
+      current: e.currentTarget.dataset.src,
+      urls: [e.currentTarget.dataset.src]
+    })
+  },
   /**
    * 生命周期函数--监听页面显示
    */

miniprogram/pages/index/index.wxml

@@ -4,29 +4,9 @@
     <!-- <view class="topShadow"></view> -->
     <view class="slider-count">{{current + 1}}/{{5}}</view>
     <swiper indicator-dots="{{false}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="changeSwiper">
-      <swiper-item>
-        <view class="swiper-item ">
-          <image src="https://oss.dayaedu.com/ktyq/1731664204915.png"></image>
-        </view>
-      </swiper-item>
-      <swiper-item>
-        <view class="swiper-item ">
-          <image src="https://oss.dayaedu.com/ktyq/1731664238525.png"></image>
-        </view>
-      </swiper-item>
-      <swiper-item>
-        <view class="swiper-item ">
-          <image src="https://oss.dayaedu.com/ktyq/1731664250837.png"></image>
-        </view>
-      </swiper-item>
-      <swiper-item>
-        <view class="swiper-item ">
-          <image src="https://oss.dayaedu.com/ktyq/1731664259087.png"></image>
-        </view>
-      </swiper-item>
-      <swiper-item>
-        <view class="swiper-item ">
-          <image src="https://oss.dayaedu.com/ktyq/1731664269098.png"></image>
+      <swiper-item wx:for="{{imgList}}" wx:key="index">
+        <view class="swiper-item">
+          <image bind:tap="onPreivewBannerImg" data-src="{{ item }}" src="{{ item }}"></image>
         </view>
       </swiper-item>
     </swiper>
@@ -62,10 +42,9 @@
       <view class="goodsIntro">
         <view class="title">图文详情</view>
         <view class="images">
-          <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1731664304424.png"></image>
-          <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1731664318588.png"></image>
-          <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1731664330981.png"></image>
-          <image mode="widthFix" src="https://oss.dayaedu.com/ktyq/1732085582320.png"></image>
+          <block wx:for="{{goodsImgList}}" wx:key="index">
+            <image  mode="widthFix" bind:tap="onPreivewGoodsImg" data-src="{{item}}" src="{{item}}"></image>
+          </block>
         </view>
       </view>
     </view>
@@ -91,7 +70,7 @@
 
         <view class="product-section">
           <view class="product-img">
-            <image src="{{ selected.pic }}"></image>
+            <image bind:tap="onPreivewGoods" data-src="{{ selected.pic }}" src="{{ selected.pic }}"></image>
           </view>
           <view class="product-left">
             <view class="currentPrice">