yulanzujian

nova-werun/components/circle-card/index.js

@@ -47,6 +47,11 @@ Component({
         //
         maxLength: 110, // 设置最大长度
         showFull: false, // 控制是否显示完整内容
+
+        //
+        imgList:[],
+        currentImg:'',
+        previewHideStatus:false
     },
     lifetimes: {
 
@@ -565,5 +570,22 @@ Component({
                 showFull: false
             });
         },
+
+        //
+        // 点击预览大图
+        openpreviewImg(e) {
+            const index = e.currentTarget.dataset.index
+            console.log(index);
+            // const currentImg = e.currentTarget.dataset.currentImg
+            // console.log(this.data.images,imgList,currentImg);
+            this.setData({
+                //imgList 图片地址数组
+                imgList:this.data.images,
+                currentImg:this.data.images[index],
+                previewHideStatus:true
+            })
+            console.log(this.data.imgList,this.data.currentImg);
+        }
+
     }
 })

nova-werun/components/circle-card/index.json

@@ -3,6 +3,7 @@
     "usingComponents": {
         "van-icon": "@vant/weapp/icon/index",
         "van-popup": "@vant/weapp/popup/index",
-        "van-dialog": "@vant/weapp/dialog/index"
+        "van-dialog": "@vant/weapp/dialog/index",
+        "previewImg":"../previewImg/index"
     }
 }

nova-werun/components/circle-card/index.wxml

@@ -153,12 +153,12 @@
     <!-- 图片 -->
     <!-- 4张图片 -->
     <view class="picture4" wx:if="{{images.length==4}}">
-        <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
+        <image mode="scaleToFill" bindtap="openpreviewImg" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
     </view>
     <!-- 3张和5-9张图片 -->
     <block wx:if="{{ type=='surface'}}">
         <view class="picture" wx:if="{{images.length>4  && images.length<=9 || images.length==3 }}">
-            <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
+            <image mode="scaleToFill" bindtap="openpreviewImg" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
         </view>
     </block>
 
@@ -166,7 +166,7 @@
     <view class="picture5" wx:if="{{images.length > 9 && type=='surface'}}">
         <view wx:for="{{images}}" wx:if="{{index < 9}}">
             <view class="image-wrapper">
-                <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="image" src="{{item}}"></image>
+                <image mode="scaleToFill" bindtap="openpreviewImg" data-index="{{index}}" class="image" src="{{item}}"></image>
                 <view class="more-images" wx:if="{{index==8}}" bindtap="gourl" data-url="../../pages/circle/circle-detail/index" data-id="{{cicleList[0].objectId}}">+{{images.length - 9}}</view>
             </view>
         </view>
@@ -174,12 +174,16 @@
     </view>
     <!-- 2张图片 -->
     <view class="picture2" wx:if="{{images.length==2}}">
-        <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
+        <image mode="scaleToFill" bindtap="openpreviewImg" data-index="{{index}}" class="image" wx:for="{{images}}" wx:key="{{index}}" src="{{item}}"> </image>
     </view>
     <!-- 1张图片 -->
     <view class="picture3" wx:if="{{images.length==1}}">
-        <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="{{imageclass}}" wx:for="{{images}}" src="{{item}}" bindload="onImageLoad"> </image>
+        <image mode="scaleToFill" class="{{imageclass}}" data-index="{{index}}" wx:for="{{images}}" wx:key="index" src="{{item}}" bindload="onImageLoad" bindtap="openpreviewImg"> </image>
     </view>
+
+    <previewImg  previewHideStatus='{{previewHideStatus}}'  previewImgList="{{imgList}}" previewImg="{{currentImg}}" />
+
+
     <view class="addbox">
         <van-icon name="location-o" size='28rpx' />
         <view class="add-tex">南昌市</view>

nova-werun/components/previewImg/index.js

@@ -0,0 +1,151 @@
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        previewImgList: {
+            type: Array,
+            value: [],
+            observer: function(newVal) {
+                this.initializeImgIndex();
+            }
+        },
+        previewImg: {
+            type: String,
+            value: '',
+            observer: function(newVal) {
+                this.initializeImgIndex();
+            }
+        },
+        previewHideStatus: {
+            type: Boolean,
+            value: false
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        index: 0,
+        imgindex: 1,
+        left: '0%',
+        scaleObj: {
+            scale: 1,
+            x: 0,
+            y: 0,
+            yes: true
+        },
+        touchS: [],
+        touchE: [],
+        preview_box_top: '0%' // 初始化预览框位置
+    },
+
+    lifetimes: {
+        detached: function () {
+            // 在组件实例被从页面节点树移除时执行
+        },
+        attached: async function () {
+            // 在组件实例进入页面节点树时执行
+            this.initializeImgIndex();
+        },
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        initializeImgIndex: function () {
+            const {
+                previewImgList,
+                previewImg
+            } = this.properties;
+            console.log(this.properties);
+            if (previewImgList.length > 0 && previewImg) {
+                const index = previewImgList.findIndex(img => img === previewImg);
+                if (index !== -1) {
+                    this.setData({
+                        index: index,
+                        imgindex: index + 1, // imgindex 从 1 开始
+                        left: '-' + index + '00%;transition: all .5s;'
+                    });
+                } else {
+                    // 如果没有找到，可以选择处理的逻辑，比如重置 index
+                    this.setData({
+                        index: 0,
+                        imgindex: 1,
+                        left: '0%;transition: all .5s;'
+                    });
+                }
+            }
+        },
+
+        touchStart: function (e) {
+            this.data.touchStartTime = e.timeStamp; // 时间点
+            let sx = e.touches[0].pageX;
+            let sy = e.touches[0].pageY;
+            this.data.touchS = [sx, sy];
+        },
+
+        touchMove: function (e) {
+            let start = this.data.touchS;
+            let sx = e.touches[0].pageX;
+            let sy = e.touches[0].pageY;
+            this.data.touchE = [sx, sy];
+        },
+
+        touchEnd: function (e) {
+            let start = this.data.touchS;
+            let end = this.data.touchE;
+            let scaleObj = this.data.scaleObj;
+
+            if (scaleObj.yes) {
+                if (end[0] === 0) {
+                    console.log('点击');
+                    this.jingzhi()
+                } else if ((start[0] < end[0] - 50) && (scaleObj.scale === 1 && scaleObj.x === 0 && scaleObj.y === 0)) {
+                    if (this.data.index > 0) {
+                        this.data.index -= 1;
+                        this.data.imgindex -= 1;
+                        this.updateView();
+                    }
+                } else if ((start[0] > end[0] + 50) && (scaleObj.scale === 1 && scaleObj.x === 0 && scaleObj.y === 0)) {
+                    if (this.data.index < this.data.previewImgList.length - 1) {
+                        this.data.index += 1;
+                        this.data.imgindex += 1;
+                        this.updateView();
+                    }
+                } else {
+                    console.log('下滑/上滑');
+                    // this.jingzhi()
+                }
+                this.data.touchE = [0, 0];
+            }
+
+            setTimeout(() => {
+                if (this.data.scaleObj.x === 0 && this.data.scaleObj.y === 0 && this.data.scaleObj.scale === 1) {
+                    this.data.scaleObj.yes = true;
+                }
+            }, 500);
+        },
+
+        updateView: function () {
+            this.setData({
+                index: this.data.index,
+                left: '-' + this.data.index + '00%;transition: all .5s;',
+                imgindex: this.data.imgindex
+            });
+        },
+
+        jingzhi: function () {
+            // 处理点击事件
+            console.log('点击图片');
+            this.setData({
+                preview_box_top: '0%',
+                previewHideStatus: false ,// 点击后重新显示预览框
+                previewImgList:[],
+                previewImg:''
+            });
+        }
+    }
+});

nova-werun/components/previewImg/index.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

nova-werun/components/previewImg/index.wxml

@@ -0,0 +1,16 @@
+<view class="preview_box" wx:if="{{previewHideStatus}}" style="top:{{preview_box_top}}" catchtouchmove='stopPageScroll'>
+    <view class="totalimg">{{imgindex}}/{{previewImgList.length}}</view>
+    <view class="preview_box1" style="left:{{left}}" bindtap="jingzhi">
+        <block wx:for="{{previewImgList}}" wx:key="key">
+            <view class="img_box">
+                <view bindtouchstart='touchStart' bindtouchmove='touchMove' bindtouchend='touchEnd'>
+                    <movable-area scale-area>
+                        <movable-view direction="all" animation catchscale="onScale" scale scale-min="1" scale-max="5" scale-value="{{scaleObj.scale}}">
+                            <image src="{{item}}" style="width:100%;" mode="widthFix"></image>
+                        </movable-view>
+                    </movable-area>
+                </view>
+            </view>
+        </block>
+    </view>
+</view>

nova-werun/components/previewImg/index.wxss

@@ -0,0 +1,61 @@
+page {
+    height: 100%;
+}
+
+.preview_box {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background: #000;
+    white-space: nowrap;
+    transition: all .3s;
+    height: 100%;
+    z-index: 99999;
+}
+
+.preview_box > .totalimg {
+    color: #fff;
+    position: absolute;
+    z-index: 999;
+    top: 120rpx;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.preview_box > .preview_box1 {
+    height: 100%;
+    position: relative;
+}
+
+.img_box {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+}
+
+.img_box > view {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-items: center;
+}
+
+movable-view {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    color: #fff;
+}
+
+movable-area {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}