no message

components/dgex-tantan/dgex-tantan.vue

@@ -19,9 +19,14 @@
 					}]">
 					 <!-- 加载图片会闪屏 双if避免 -->
 					<template v-if="currentIndex + visible >= index && currentIndex <= index">
+            <view  class="tantan-slide-img-box"   :style="{height: winHeigh + 'px'}">
+              <image class="tantan-slide-img" :class="{'overturn-shake':overturnType===1,'overturn-back-shake':overturnType===2}" :style="{height: winHeigh + 'px'}"  mode="aspectFill" :src="item.image" ></image>
+              <view class="slide-img-click">
+                <view class="slide-img-click-item" @click.stop="setImgKey(item,0)"></view>
+                <view class="slide-img-click-item" @click.stop="setImgKey(item,1)"></view>
+              </view>
+            </view>
 
-						<image class="tantan-slide-img" mode="aspectFill" :src="item.image" ></image>
-					
 						<view v-if="index === currentIndex">
 							<view class="tantan-slide-box-icon tantan-slide-box-dislike"
 								:style="{
@@ -45,7 +50,9 @@
 </template>
 
 <script>
-	export default {
+	import tools from "@/service/tools";
+
+  export default {
 		name: "slide",
 		props: {
 			list: {
@@ -77,8 +84,19 @@
 				slideing: false,
 				love: 0,
 				dislike: 0,
+
+        imgKey:0,
+        overturnType:0
 			}
 		},
+    watch:{
+      'overturnType':function (){
+        console.log('this.overturnType:'+this.overturnType)
+        if(this.overturnType===1){
+          tools.vibrate()
+        }
+      }
+    },
 		mounted() {
 			const res = uni.getSystemInfoSync()
       console.log(res)
@@ -86,6 +104,55 @@
 			this.winHeigh = res.windowHeight-46
 		},
 		methods: {
+      setImgKey(item, type){
+        if( this.overturnType<=0){
+          let imgNum=item.images.length-1
+          if(type===0){
+            if(this.imgKey<=0){
+              this.setOverturnTwo()
+            }else {
+              --this.imgKey
+              this.setOverturnImg(item)
+            }
+          }else {
+            if(this.imgKey>=imgNum){
+              this.setOverturnTwo()
+            }else {
+              ++this.imgKey
+              this.setOverturnImg(item)
+            }
+          }
+        }
+      },
+      setOverturnImg(item){
+        // tools.success('one')
+        // return;
+
+        this.overturnType=1;
+        setTimeout(()=>{
+          item.image=item.images[this.imgKey]
+          this.overturnType=2;
+          setTimeout(()=>{
+            this.overturnType=0;
+          },80)
+        },80)
+      },
+      setOverturnTwo(){
+        // tools.error('two')
+        // return;
+        this.overturnType=1;
+        let overturnNum=1
+       let overturnServe=setInterval(()=>{
+          ++overturnNum
+         if(overturnNum>4){
+           this.overturnType=0;
+           clearInterval(overturnServe)
+         }else {
+           this.overturnType=(overturnNum%2===1)?1:2
+         }
+        },80)
+
+      },
 			cardTransform(item, index) {
 				let css = {};
 				if (index === this.currentIndex) {
@@ -200,10 +267,8 @@
 		}
 	};
 </script>
-<style>
-	/* fa547c f8ba35 */
+<style lang="scss">
 	.tantan-slide {
-		/* background-color: #2196f3; */
 		width: 100%;
 		height: 100%;
 		display: flex;
@@ -211,7 +276,6 @@
 		align-items: center;
 		overflow: hidden;
 	}
-
 	.tantan-slide-box {
 		position: relative;
 		width: calc(100vw - 32rpx);
@@ -221,7 +285,6 @@
 		transform-style: preserve-3d;
 		margin: auto;
 	}
-
 	.tantan-slide-box-item {
 		transform-style: preserve-3d;
 		display: flex;
@@ -233,27 +296,8 @@
 		transform: translate3d(0px, 0px, 0px) rotate(0deg);
 		transition: 300ms;
 		color: #fff;
-		/* display: none; */
-	}
 
-	.tantan-slide-box-item.on {
-		/* opacity: 1; */
-		display: block;
 	}
-
-	.tantan-slide-box-item-bg {
-		height: 380rpx;
-		background-image: linear-gradient(to bottom, transparent, #000000 70%);
-		position: absolute;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		margin: auto;
-		z-index: 1;
-		border-bottom-right-radius: 40rpx;
-		border-bottom-left-radius: 40rpx;
-	}
-
 	.tantan-slide-box-icon {
 		position: absolute;
 		width: 70rpx;
@@ -268,51 +312,48 @@
 		align-items: center;
 		justify-content: center;
 	}
-
 	.tantan-slide-box-love {
 		left: 50rpx;
 	}
-
 	.tantan-slide-box-dislike {
 		right: 50rpx;
 	}
-
-	.tantan-slide-img {
+	.tantan-slide-img-box {
 		position: relative;
 		will-change: transform;
 		width: 100%;
 		height: 100%;
 		border-radius: 40rpx;
+    background-repeat: no-repeat;//不平铺
+    background-position: center center;//居中
+    background-size: cover;//随容器大小
+    .tantan-slide-img{
+      z-index: 10;
+      border-radius: 40rpx;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+    .slide-img-click{
+      z-index: 100;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: space-between;
+      .slide-img-click-item{
+        z-index: 100;
+        width: 50%;
+        height: 100%;
+      }
+
+
+    }
 	}
-	.tantan-slide-img.on{
-		transform: scale(1);
-		width: 50rpx;
-		height: 50rpx;
-	}
-	.tantan-slide-box-info{
-		padding: 0 32rpx;
-		color: #ffffff;
-	}
-	.tantan-slide-box-info .title{
-		font-size: 64rpx;
-		line-height: 1.2;
-		text-shadow: 0 0 10rpx rgb(0, 0, 0, 0.5);
-	}
-	.tantan-slide-box-info .desc{
-		font-size: 32rpx;
-		line-height: 1.2;
-		margin-top: 30rpx;
-		text-shadow: 0 0 10rpx rgb(0, 0, 0, 0.5);
-	}
-	.tantan-slide-box-info .tags{
-		margin-top: 24rpx;
-	}
-	.tantan-slide-box-info .tag{
-		height: 48rpx;
-		font-size: 24rpx;
-		padding: 0 16rpx;
-		line-height: 48rpx;
-		background-color: rgba(255, 255,255,0.3);
-		border-radius: 10rpx;
-	}
+
+
+
+
+
 </style>

pages/index/model/slide-item.vue

@@ -31,9 +31,17 @@ export default {
       const n = Math.floor(Math.random() * (tu.length - 1))
       let data = {
         image: tu[n],
+        images: [
+          'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2Fc7a27a1ej00qvpu700019c000hs00vlc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
+          'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F9f81e6aaj00qvpu70001xc000hs00vmc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
+          'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F55bf2cb3j00qvpu70002cc000hs012jc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
+          'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F2017725bj00qvpu70001jc000hs00zxc.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
+        ],
         title: '你好',
-        desc: n + 500 + 'm ' + '30分钟前活跃',
-        tags: ['射手座']
+        age: '19',
+        distance: '19.6',
+        city: '香港九龙城',
+        weChat: 'siococos',
       }
       arr.push(data)
     }
@@ -54,9 +62,17 @@ export default {
           const n = Math.floor(Math.random() * (tu.length - 1))
           let newdata = {
             image: tu[n],
+            images: [
+              'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2Fc7a27a1ej00qvpu700019c000hs00vlc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
+              'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F9f81e6aaj00qvpu70001xc000hs00vmc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
+              'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F55bf2cb3j00qvpu70002cc000hs012jc.jpg&thumbnail=660x2147483647&quality=80&type=jpg',
+              'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0704%2F2017725bj00qvpu70001jc000hs00zxc.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
+            ],
             title: '你好',
-            desc: n + 500 + 'm ' + '30分钟前活跃',
-            tags: ['射手座']
+            age: '19',
+            distance: '19.6',
+            city: '香港九龙城',
+            weChat: 'siococos',
           }
           this.list.push(newdata)
         }

static/css/shake.css

@@ -1,3 +1,4 @@
+/*抖动动画*/
 @keyframes shake {
     10%,
     90% {
@@ -20,3 +21,30 @@
 .apply-shake {
     animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 }
+
+/*翻转动画*/
+@keyframes rotate {
+    0% {
+        transform: rotateY(0deg);
+    }
+    100% {
+        transform: rotateY(20deg);
+    }
+}
+@keyframes rotateBack {
+    0% {
+        transform: rotateY(20deg);
+    }
+    100% {
+        transform: rotateY(0deg);
+    }
+}
+
+.overturn-shake {
+    animation: rotate 0.8s ease-in-out 1;
+    animation-fill-mode: forwards;
+}
+.overturn-back-shake {
+    animation: rotateBack 0.8s ease-in-out 1;
+    animation-fill-mode: forwards;
+}