lcoco/components/dgex-tantan/dgex-tantan.vue

<template>
	<view class="tantan-slide" :style="{
		width: winWidth + 'px',
		height: winHeigh + 'px',
	}">

		<view @touchstart.capture="touchStart($event,currentIndex)"
			@touchmove.stop.capture="touchMove($event,currentIndex)"
			@touchend.capture="touchEnd(currentIndex)" class="tantan-slide-box">
			<template v-for="(item, index) in list">
				<view class="tantan-slide-box-item"
					:key="index"
					v-if="currentIndex + visible >= index"
					 @click.stop="clickImage"
					:style="[cardTransform(item, index), {
						'zIndex': list.length - index,
						'opacity': currentIndex + visible - 1 >= index && currentIndex <= index ? 1 : 0,
						'transform': 'rotate(' + ((item.x || 0) / 30 ) +  'deg) translate3d(' + (item.x || 0) + 'px,' + (item.y || 0) + 'px, '+  0  +'px)'
					}]">
					 <!-- 加载图片会闪屏 双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>

						<view v-if="index === currentIndex">
							<view class="tantan-slide-box-icon tantan-slide-box-dislike"
								:style="{
									opacity: dislike * 1.5,
									transform: 'scale('+ (dislike + 1 > 2 ? 2 : dislike + 1 )  +')',
								}">
								<image style="width: 30rpx;height: 30rpx;" src="/static/dgex-tantan/close.png"></image>
							</view>
							<view class="tantan-slide-box-icon tantan-slide-box-love" :style="{
									opacity: love * 1.5,
									transform: 'scale('+ (love + 1 > 2 ? 2 : love + 1 )  +')',
								}">
								<image style="width: 30rpx;height: 30rpx;" src="/static/dgex-tantan/like.png"></image>
							</view>
						</view>
					</template>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import tools from "@/service/tools";

  export default {
		name: "slide",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				winWidth: 0,
				winHeigh: 0,
				/*记录x y轴*/
				x: {
					start: 0,
					move: 0,
					end: 0
				},
				y: {
					start: 0,
					move: 0,
					end: 0
				},
				visible: 3,
				/*下标*/
				currentIndex: 0,
				/*滑动*/
				swipering: false,
				/*滑动中*/
				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)
			this.winWidth = res.windowWidth
			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) {
					if (this.slideing) {
						css["transitionDuration"] = `${!this.swipering ? 1000 : 0}ms`;
					} else {
						css["transitionDuration"] = `${!this.swipering ? 300 : 0}ms`;
					}
				}
				return css
			},
			touchStart(e, index) {
				if (this.slideing) return;
				if (typeof this.list[index].x === 'undefined' && typeof this.list[index].y === 'undefined') {
					this.$set(this.list[index], 'y', 0)
					this.$set(this.list[index], 'x', 0)
				}
				this.swipering = true;
				this.x.start = e.touches[0].pageX;
				this.y.start = e.touches[0].pageY;
			},
			touchMove(e, index) {
				if (this.slideing) return
				// 滑动状态/最后一个就不滑动
				if (this.list.length == index + 1) {
					return;
				}
				this.x.move = e.touches[0].pageX;
				this.y.move = e.touches[0].pageY;

				this.list[index].x = this.x.move - this.x.start
				this.list[index].y = this.y.move - this.y.start
				if (Number.parseInt(this.list[index].x) > 0) {
					this.love = Number.parseInt(this.list[index].x) / (100 * 2)
				} else {
					this.dislike = Math.abs(Number.parseInt(this.list[index].x) / (100 * 2))
				}
			},
			touchEnd(index) {
				if (this.slideing) return
				this.swipering = false;
				if (this.list.length == index + 1) {
					return;
				}
				if (
					this.list[index].x > 0 &&
					this.list[index].x > this.winWidth / 2 - this.winWidth / 5
				) {
					this.touchEndNext(index);
				} else if (
					this.list[index].x < 0 &&
					this.list[index].x < -this.winWidth / 2 + this.winWidth / 5
				) {
					this.touchEndNext(index);
				} else {
					this.list[index].x = 0;
					this.list[index].y = 0;
					this.slideing = false;
					this.love = 0;
					this.dislike = 0;
				}
			},
			touchEndNext(index) {
				this.slideing = true;
				this.list[index].x = this.list[index].x * 5;
				this.list[index].y = this.list[index].y * 5;
				this.touchEndDone()
			},
			touchEndDone() {
				return new Promise((resolve) => {
					setTimeout(() => {
						this.slideing = false
						this.$emit('onChange', {
							currentIndex: this.currentIndex,
							currentItem: this.list[this.currentIndex],
							type: this.love !== 0 ? 'love' : 'dislike'
						})
						this.currentIndex++
						this.x.move = 0
						this.y.move = 0
						this.slideing = false
						this.btnClickType = false
						this.love = 0
						this.dislike = 0
						resolve()
					}, 300);
				})
			},
			footerBtnClick(type) {
				if (this.btnClickType) {
					return
				}
				this.btnClickType = true
				let w = 0
				if (type === 'love') {
					w = this.winWidth * 1.5
					this.love = 1
				} else if (type === 'dislike') {
					w = -this.winWidth * 1.5
					this.dislike = 1
				}
				this.$set(this.list[this.currentIndex], 'x', w)
				this.touchEndDone()
			},
			clickImage() {
				this.$emit('onClickImage', {
					type: 'click',
					currentIndex: this.currentIndex,
					currentItem: this.list[this.currentIndex],
				})
			}
		}
	};
</script>
<style lang="scss">
	.tantan-slide {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}
	.tantan-slide-box {
		position: relative;
		width: calc(100vw - 32rpx);
		height: 100%;
		perspective: 2100rpx;
		perspective-origin: 50% -30%;
		transform-style: preserve-3d;
		margin: auto;
	}
	.tantan-slide-box-item {
		transform-style: preserve-3d;
		display: flex;
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
		position: absolute;
		opacity: 0;
		transform: translate3d(0px, 0px, 0px) rotate(0deg);
		transition: 300ms;
		color: #fff;

	}
	.tantan-slide-box-icon {
		position: absolute;
		width: 70rpx;
		height: 70rpx;
		top: 45rpx;
		border-radius: 100%;
		background-color: #fff;
		z-index: 1;
		opacity: 0;
		transition: 100ms;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tantan-slide-box-love {
		left: 50rpx;
	}
	.tantan-slide-box-dislike {
		right: 50rpx;
	}
	.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%;
      }


    }
	}





</style>