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  :animation="animationData" class="tantan-slide-img-box"   :style="{height: winHeigh + 'px'}">
              <view >
                <image  class="tantan-slide-img" v-show="imgIndex===imgKey" v-for="(img,imgIndex) in item.images"   :style="{height: winHeigh + 'px'}"  mode="aspectFill" :src="img" ></image>
              </view>
              <view class="user-authentication">
                <image  class="authentication-img"     mode="aspectFill" src="/static/img/index/authentication.png" ></image>
                <view class="authentication-text sys-color-white sys-weight-600">真实头像</view>
              </view>
              <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 class="img-num-list" >
                <view class="num-item" :class="{'num-item-default':imgIndex===imgKey}" v-for="(img,imgIndex) in item.images"></view>
              </view>
              <view class="slide-data">
                <!--                用户个性消息-->
                <view class="on-line-box">
                  <image  class="on-line-img"     mode="aspectFill" src="/static/img/index/on-line.png" ></image>
                  <view class="on-line-text sys-color-black-0 sys-weight-400">当前在线</view>
                </view>
                <view class="user-data">
                  <text class="user-item sys-color-white sys-weight-600">Maple</text>
                  <text class="user-item sys-color-white sys-weight-600">,</text>
                  <text class="user-item sys-color-white sys-weight-600">19</text>
                </view>
                <view class="user-city">
                  <text class="city-item sys-color-yellow sys-weight-600">17.16</text>
                  <text class="city-item sys-color-white sys-weight-400">km</text>
                  <text class="city-item sys-color-white sys-weight-600">重庆市九龙坡</text>
                </view>
                <view class="open-wechat">
                  <image  class="open-wechat-img"     mode="aspectFill" src="/static/img/index/wechat.png" ></image>
                  <view class="open-wechat-text sys-color-white sys-weight-400">yxk********</view>
                  <image  class="lock-wechat-img"     mode="aspectFill" src="/static/img/index/lock.png" ></image>
                </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,
        animationData:{}
      }
		},
    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){
        let animation = uni.createAnimation({
          duration: 80,
          timingFunction: 'ease',
        })
        animation.rotateY(3).scale(1.01).step()
        item.image=item.images[this.imgKey]
        tools.vibrate()
        this.animationData = animation.export()
        setTimeout(function() {
          animation.rotateY(-3).scale(0.99).step()
          this.animationData = animation.export()
          setTimeout(function() {
            animation.rotateY(0).scale(1).step()
            this.animationData = animation.export()
          }.bind(this), 80)
        }.bind(this), 80)

      },
      setOverturnTwo(){
        // tools.error('two')
        // return;
        let animation = uni.createAnimation({
          duration: 80,
          timingFunction: 'ease',
        })
        animation.rotateY(3).step()
        tools.vibrate()
        let overturnNum=1
       let overturnServe=setInterval(()=>{
          ++overturnNum
         // console.log('overturnNum:'+overturnNum)
         if(overturnNum>4){
           clearInterval(overturnServe)
         }else {
          let overturnType=(overturnNum%2===1)?1:2
           if(overturnType===1){
             animation.rotateY(-3).step()
             tools.vibrate()
           }else {
             animation.rotateY(0).step()
           }
           this.animationData = animation.export()
         }
        },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) => {
          this.imgKey=0
					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;//随容器大小
    transform-style: preserve-3d; /* 为子元素开启 三维立体环境 */
    .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%;
      }
    }
    .user-authentication{
      z-index: 101;
      position: absolute;
      top: 32rpx;
      left: 24rpx;
      width: 150rpx;
      height: 36rpx;
      border-radius: 8rpx;
      background: rgba(0,0,0,0.2);
      display: flex;
      justify-content: center;
      padding:  4rpx 8rpx;
      .authentication-img{
        width: 28rpx;
        height: 28rpx;
        margin-right: 8rpx;
        margin-top: 4rpx;
      }
      .authentication-text{
          font-size: 24rpx;
        height: 36rpx;
        line-height: 36rpx;
      }
    }
    .img-num-list{
      z-index: 101;
      position: absolute;
      width: calc(100vw - 32rpx);
      top: 32rpx;
      left: 0;
      display: flex;
      justify-content: center;
      .num-item{
        border-radius: 50%;
        width: 8rpx;
        height: 8rpx;
        background: rgba(255,255,255,0.4);
        margin-right: 6rpx;
        transition: .5s ease;
      }
      .num-item-default{
        width: 48rpx;
        border-radius: 20rpx;
        background: #FFFFFF;
      }

    }
    .slide-data{
      position: absolute;
      left: 28rpx;
      bottom: 32rpx;
      z-index: 101;
      .on-line-box{
        max-width: 160rpx;
        border-radius: 12rpx;
        background: #FFFFFF;
        display: flex;
        justify-content: center;
        padding: 4rpx 18rpx;
        margin-bottom: 24rpx;
        .on-line-img{
          width: 24rpx;
          height: 24rpx;
          margin-top: 10rpx;
          margin-right: 8rpx;
        }
        .on-line-text{
          height: 44rpx;
          line-height: 44rpx;
          font-size: 24rpx;
        }
      }
      .user-data{
        .user-item{
          font-size: 48rpx;
        }
      }
      .user-city{
        margin-top: 16rpx;
        height:44rpx;
        display:table-cell;
        vertical-align:bottom;
        .city-item{
          margin-right: 14rpx;
          font-size: 24rpx;
        }
        .city-item:first-child{
          font-size: 36rpx;
        }
      }
      .open-wechat{
        margin-top: 32rpx;
        display: flex;
        justify-content: space-between;
        padding: 8rpx;
        background: rgba(0,0,0,0.5);
        border-radius: 200rpx;
        .open-wechat-img{
          width: 64rpx;
          height: 64rpx;
        }
        .open-wechat-text{
          height: 64rpx;
          line-height: 64rpx;
          margin-left: 18rpx;
          margin-right: 40rpx;
          font-size: 28rpx;
        }
        .lock-wechat-img{
          width: 76rpx;
          height: 64rpx;
        }
      }
    }
  }







</style>