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

<template>
	<view class="tantan-slide" :style="{
		width: winWidth + 'px',
		height: winHeight + 'px',
	}">
<!--    @touchstart.capture="touchStart($event,currentIndex)"-->
<!--     @longpress="longPress($event,currentIndex)"-->
		<view

			@touchmove.stop="touchMove($event,currentIndex)"
			@touchend.stop="touchEnd(currentIndex)"
      @touchstart.stop="touchStart($event,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.moveX || 0) / 30 ) +  'deg) translateX(' + (item.moveX || 0) + 'px)'
					}]">
<!--         -->
					 <!-- 加载图片会闪屏 双if避免 -->
					<template v-if="currentIndex + visible >= index && currentIndex <= index">
            <view   class="tantan-slide-img-box" :class="{'animate__shakeX':true}"   :style="{height: winHeight + 'px'}">
              <scroll-view :enhanced="true"  :bounces="false" :show-scrollbar="false" refresher-default-style="none" class="tantan-slide-img-scroll-box" @scroll="endScroll"  :scroll-y="!ifLongTap" :style="{height: item.boxHeight + 'px',width:item.boxWidth+'px'}">
              <view class="img-list tantan-slide-img">
                  <swiper  :style="{height: item.boxHeight + 'px',width:item.boxWidth+'px'}" class="swiper" :current="item.imgIndex" :indicator-dots="false" :autoplay="false" :interval="0"
                           :duration="0">
                    <swiper-item v-for="(img,imgIndex) in item.images">
                      <image     :style="{height: item.boxHeight + 'px',width:item.boxWidth+'px'}"  mode="aspectFill" :src="img" ></image>
                    </swiper-item>

                  </swiper>

              </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===item.imgIndex}" 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 class="user-content">
                <user-content></user-content>
              </view>
              </scroll-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";
  import UserContent from "@/pages/index/model/user-content";
  export default {
		name: "slide",
    components: {UserContent},
    props: {

		},
		data() {
			return {
        list:[],
				winWidth: 0,
				winHeight: 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:{},
        ifLongTap: false,
        isSlide:false,
        slideServe:false,
      }
		},
    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.winHeight = res.windowHeight-84


    },
		methods: {
      setBox(index,type){
        if(  this.list[index]){
          if(type===1){
            this.list[index].boxWidth=this.winWidth-18
            this.list[index].boxHeight=this.winHeight
          }else if(type===2){
            this.list[index].boxWidth=this.winWidth-23
            this.list[index].boxHeight=this.winHeight-20
          }else {
            this.list[index].boxWidth=this.winWidth-28
            this.list[index].boxHeight=this.winHeight-30
          }
        }
      },
      setData(list){
        list.forEach((item)=>{
          item.imgIndex=0
          item.moveX=0
          item.angleNum=0
          item.animation={}
          if( this.list.length<=0){
            item.boxWidth=this.winWidth-18
            item.boxHeight=this.winHeight
          }else {
            item.boxWidth=this.winWidth-28
            item.boxHeight=this.winHeight-30
          }

          this.list.push(item)
        })
      },
      setImgKey(item, type){
        // this.touchEndNext(this.currentIndex)
        // return;
        console.log('type:'+type)
        if( this.overturnType<=0){
          let imgNum=item.images.length-1
          if(type===0){
            if(item.imgIndex<=0){
              // this.setOverturnTwo()
            }else {
              --item.imgIndex
              // this.setOverturnImg(item)
            }
          }else {
            if(item.imgIndex>=imgNum){
              // this.setOverturnTwo()
            }else {
              ++item.imgIndex
              // this.setOverturnImg(item)
            }
          }
          console.log('item.imgIndex:'+item.imgIndex)
        }
      },
      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
			},
      endScroll(){
        if(!this.isSlide){
          this.isSlide=true
          if(!this.slideServe){
            this.slideServe=setTimeout(()=>{
              this.isSlide=false
              clearTimeout( this.slideServe)
              this.slideServe=null
            },50)
          }
        }
      },

			touchStart(e, index) {
				if (this.slideing) return;
        if (this.isSlide) 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.$set(this.list[index], 'moveX', 0)
					this.$set(this.list[index], 'angleNum', 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.isSlide) return
				// 滑动状态/最后一个就不滑动
				if (this.list.length === index + 1) {
					return;
				}
        this.x.move = e.touches[0].pageX;
        this.y.move = e.touches[0].pageY;
        // console.log('this.x.start:'+this.x.start+'this.x.move:'+this.x.move)
        // console.log('this.y.start:'+this.y.start+'this.y.move:'+this.y.move)
        this.list[index].x = this.x.move - this.x.start
        this.list[index].y = this.y.move - this.y.start
        let moveX= Math.abs(this.list[index].x)
        if(moveX>18){
          this.ifLongTap=true
          this.setBox(this.currentIndex,2)
          let angleNum= this.getAngleNum(moveX)
          if (Number.parseInt(this.list[index].x) > 0) {
            this.love = Number.parseInt(this.list[index].x) / (100 * 2)
            this.list[index].moveX=this.list[index].x - 30
            this.list[index].angleNum=angleNum*-1
          } else {
            this.dislike = Math.abs(Number.parseInt(this.list[index].x) / (100 * 2))
            this.list[index].moveX=this.list[index].x+30
            this.list[index].angleNum=angleNum
          }
        }


			},
      getAngleNum(moveX){
        moveX-=10
        let angleNum=(30*(moveX/this.winWidth*3)).toFixed(2)
        if(angleNum>30){
          angleNum=30
        }
        return (angleNum*1).toFixed(6);
      },
			touchEnd(index) {
        if(this.ifLongTap){
          this.ifLongTap=false
        }
        // if (this.isSlide) return
				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.list[index].moveX = 0;
					this.list[index].angleNum = 0;
					this.slideing = false;
					this.love = 0;
					this.dislike = 0;
          this.setBox(index+1,3)
				}
			},
			touchEndNext(index) {
				this.slideing = true;
				this.list[index].x = this.list[index].x * 5;
				this.list[index].y = this.list[index].y * 5;
        this.list[index].moveX *= 5 ;
        this.list[index].angleNum *= 5;
        this.setBox(this.currentIndex+1,1)
				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">
@import 'animate.css';
	.tantan-slide {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tantan-slide-box {
		position: relative;
		width: calc(100vw - 34rpx);
		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: 20rpx;
		position: absolute;
		opacity: 0;
		transform: rotate(0) translateX(0);
		transition: 450ms;
		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: 20rpx;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
    display: flex;
    justify-content: center;
    align-items: center;

    .tantan-slide-img-scroll-box{
      width: 100%;
      height: 100%;
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: none;
      border-radius: 20rpx;
      transition: width 100ms,height 100ms;
    }

    .tantan-slide-img{
      z-index: 10;
      //border-radius: 20rpx 20rpx 0 0;
      //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>