yulanzujian

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

@@ -573,18 +573,16 @@ Component({
 
         //
         // 点击预览大图
-        openpreviewImg(e) {
+        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.selectComponent("#previewComponent").showPreview();
             this.setData({
                 //imgList 图片地址数组
                 imgList:this.data.images,
                 currentImg:this.data.images[index],
-                previewHideStatus:true
+                // previewHideStatus:true
             })
-        }
+          },
 
     }
 })

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

@@ -5,5 +5,6 @@
         "van-popup": "@vant/weapp/popup/index",
         "van-dialog": "@vant/weapp/dialog/index",
         "previewImg":"../previewImg/index"
-    }
+    },
+    "navigationStyle":"custom"
 }

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

@@ -181,7 +181,7 @@
         <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}}" />
+    <previewImg id="previewComponent" previewImgList = "{{imgList}}" previewImg = "{{currentImg}}"  />
 
 
     <view class="addbox">

nova-werun/components/previewImg/index.js

@@ -1,151 +1,157 @@
+var that;
 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
-        }
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    previewImgList: {
+      type: Array,
+      value: false
     },
-
-    /**
-     * 组件的初始数据
-     */
-    data: {
-        index: 0,
-        imgindex: 1,
-        left: '0%',
-        scaleObj: {
-            scale: 1,
-            x: 0,
-            y: 0,
-            yes: true
-        },
-        touchS: [],
-        touchE: [],
-        preview_box_top: '0%' // 初始化预览框位置
+    previewImg: {
+      type: null,
+      value: false
     },
-
-    lifetimes: {
-        detached: function () {
-            // 在组件实例被从页面节点树移除时执行
-        },
-        attached: async function () {
-            // 在组件实例进入页面节点树时执行
-            this.initializeImgIndex();
-        },
+  },
+  attached: function () {
+    that = this;
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    preview_box_top: 0,
+    left: '0px;',
+    touchS: [0, 0],
+    touchE: [0, 0],
+    index: 0,
+    imgindex:0,
+    previewHideStatus:false,
+    scale: 1,
+    scaleObj:{
+      scale:1,
+      x:0,
+      y:0,
+      yes:true
     },
+    touchStartTime: 0,   // 触摸开始时间
+    touchEndTime: 0,     // 触摸结束时间
+    lastTapTime: 0,  // 最后一次单击事件点击发生时间
+    lastTapTimeoutFunc: null, // 单击事件点击后要触发的函数
+  },
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    jingzhi(e) { 
+      let diffTouch = this.data.touchEndTime - this.data.touchStartTime;
+      let curTime = e.timeStamp;
+      let lastTime = this.data.lastTapDiffTime;
+      this.data.lastTapDiffTime = curTime;
 
-    /**
-     * 组件的方法列表
-     */
-    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 0s;'
-                    });
-                } 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];
-        },
+      this.setData({previewHideStatus: false,preview_box_top: '100%' })
 
-        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
-            });
-        },
+      //两次点击间隔小于300ms, 认为是双击
+    //   let diff = curTime - lastTime;
+    //   if (diff < 300) {
+    //     console.log("double tap")
+    //     clearTimeout(this.data.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
+    //     if(this.data.scale == 1){
+    //         this.setData({
+    //         scale:2
+    //       })
+    //     }else{
+    //       this.setData({
+    //         scale:1
+    //       })
+    //     }
+    //   } else {
+    //     this.data.lastTapTimeoutFunc = setTimeout(function () {
+    //       console.log("single tap")
+    //       if(that.data.scaleObj.yes){
+    //         that.setData({previewHideStatus: false })
+    //         console.log('运行了');
+    //       }
+    //     }, 300);
+    //   }
+    },
+    configqxClick(e) { this.setData({ scopeWritePhotosAlbum: e.detail }) },
+    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) {
+      this.data.touchEndTime = e.timeStamp //时间点
+      let start = this.data.touchS
+      let end = this.data.touchE
+      let scaleObj = this.data.scaleObj
+      //如果((start[0] < end[0] - 50) && (scaleObj.scale==1&&scaleObj.x==0&&scaleObj.y==0)) //左滑动
+      //如果((start[0] > end[0] + 50) && (scaleObj.scale==1&&scaleObj.x==0&&scaleObj.y==0)) //右滑动
+      if(scaleObj.yes){
+        if(end[0] == 0){
+          console.log('点击')
+        }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.setData({ index: this.data.index, left: '-' + this.data.index + '00%;transition: all .5s;', imgindex: this.data.imgindex });
+          }
+        }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.setData({ index: this.data.index, left: '-' + this.data.index + '00%;transition: all .5s;', imgindex: this.data.imgindex });
+          }
+        }else{
+          console.log('下滑/上滑');
+          this.setData({ preview_box_top: '100%' })
+        }
+        this.data.touchE = [0, 0];
+      }
 
-        jingzhi: function () {
-            // 处理点击事件
-            console.log('点击图片');
-            this.setData({
-                preview_box_top: '0%',
-                previewHideStatus: false ,// 点击后重新显示预览框
-                previewImgList:[],
-                previewImg:''
-            });
+      setTimeout(()=>{
+        if(this.data.scaleObj.x == 0 && this.data.scaleObj.y == 0 && this.data.scaleObj.scale == 1){
+          console.log('yes is true');
+          this.data.scaleObj.yes = true;
+        }
+      },500)
+    },
+    showPreview() {
+      this.setData({ previewHideStatus: true, preview_box_top: 0 })
+    },
+    hidePreview() {
+      this.setData({ previewHideStatus: false, preview_box_top: 0 })
+    },
+    onScale(e) {
+      this.data.scaleObj = {
+        scale:e.detail.scale,
+        x:e.detail.x,
+        y:e.detail.y,
+        yes:false
+      }
+    },
+    stopPageScroll() { return },
+  },
+  observers: {
+    'previewImgList': function (arr) {
+      console.log(arr)
+    },
+    'previewImg':function(img){
+      this.data.previewImgList.map((item,index)=>{
+        if(item == img){
+          let imgindex = index;
+          imgindex+=1;
+          this.setData({ index: index, imgindex: imgindex, left: '-'+index+'00%;' })
         }
+      })
     }
-});
+  },
+})

nova-werun/components/previewImg/index.wxml

@@ -1,16 +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>
+  <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="{{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

@@ -1,8 +1,7 @@
-page {
+page{
     height: 100%;
-}
-
-.preview_box {
+  }
+  .preview_box{
     position: fixed;
     top: 0;
     left: 0;
@@ -13,49 +12,45 @@ page {
     transition: all .3s;
     height: 100%;
     z-index: 99999;
-}
-
-.preview_box > .totalimg {
+  }
+  .preview_box>.totalimg{
     color: #fff;
     position: absolute;
     z-index: 999;
-    top: 120rpx;
+    top: 100rpx;
     display: flex;
     justify-content: center;
     width: 100%;
-}
-
-.preview_box > .preview_box1 {
+  }
+  .preview_box>.preview_box1{
     height: 100%;
     position: relative;
-}
-
-.img_box {
+  }
+  .img_box{
     position: relative;
     display: inline-block;
     width: 100%;
     height: 100%;
-}
-
-.img_box > view {
+  }
+  .img_box>view{
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-items: center;
-}
-
-movable-view {
+  }
+  movable-view {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100%;
     width: 100%;
     color: #fff;
-}
-
-movable-area {
+  }
+  
+  movable-area {
     height: 100%;
     width: 100%;
     overflow: hidden;
-}
+  }
+