|
|
@@ -1,14 +1,15 @@
|
|
|
<template>
|
|
|
<view class="tantan-slide" :style="{
|
|
|
width: winWidth + 'px',
|
|
|
- height: winHeigh + 'px',
|
|
|
+ height: winHeight + 'px',
|
|
|
}">
|
|
|
<!-- @touchstart.capture="touchStart($event,currentIndex)"-->
|
|
|
+<!-- @longpress="longPress($event,currentIndex)"-->
|
|
|
<view
|
|
|
|
|
|
@touchmove.stop.capture="touchMove($event,currentIndex)"
|
|
|
@touchend.capture="touchEnd(currentIndex)"
|
|
|
- @longpress="longPress($event,currentIndex)"
|
|
|
+ @touchstart.capture="touchStart($event,currentIndex)"
|
|
|
class="tantan-slide-box">
|
|
|
<template v-for="(item, index) in list">
|
|
|
<view class="tantan-slide-box-item"
|
|
|
@@ -18,14 +19,21 @@
|
|
|
: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)'
|
|
|
+ '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'}">
|
|
|
- <scroll-view class="tantan-slide-img-scroll-box" :bindscroll="endScroll" :scroll-y="!ifLongTap" :style="{height: winHeigh + 'px'}">
|
|
|
- <view class="img-list">
|
|
|
- <image class="tantan-slide-img" v-show="imgIndex===imgKey" v-for="(img,imgIndex) in item.images" :style="{height: (winHeigh+1) + 'px'}" mode="aspectFill" :src="img" ></image>
|
|
|
+ <view :animation="animationData" class="tantan-slide-img-box" :style="{height: winHeight + 'px'}">
|
|
|
+ <scroll-view class="tantan-slide-img-scroll-box" :bindscroll="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>
|
|
|
@@ -36,7 +44,7 @@
|
|
|
<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 class="num-item" :class="{'num-item-default':imgIndex===item.imgIndex}" v-for="(img,imgIndex) in item.images"></view>
|
|
|
</view>
|
|
|
<view class="slide-data">
|
|
|
<!-- 用户个性消息-->
|
|
|
@@ -97,15 +105,13 @@
|
|
|
name: "slide",
|
|
|
components: {UserContent},
|
|
|
props: {
|
|
|
- list: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- }
|
|
|
+
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
+ list:[],
|
|
|
winWidth: 0,
|
|
|
- winHeigh: 0,
|
|
|
+ winHeight: 0,
|
|
|
/*记录x y轴*/
|
|
|
x: {
|
|
|
start: 0,
|
|
|
@@ -139,35 +145,71 @@
|
|
|
if(this.overturnType===1){
|
|
|
tools.vibrate()
|
|
|
}
|
|
|
+ },
|
|
|
+ 'currentIndex':function (){
|
|
|
+ console.log('currentIndex:'+this.currentIndex)
|
|
|
+
|
|
|
+ this.setBox(this.currentIndex,1)
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
const res = uni.getSystemInfoSync()
|
|
|
console.log(res)
|
|
|
this.winWidth = res.windowWidth
|
|
|
- this.winHeigh = res.windowHeight-84
|
|
|
+ this.winHeight = res.windowHeight-84
|
|
|
|
|
|
|
|
|
},
|
|
|
methods: {
|
|
|
+ setBox(index,type){
|
|
|
+ console.log('index:'+index+'type:'+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.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){
|
|
|
if( this.overturnType<=0){
|
|
|
let imgNum=item.images.length-1
|
|
|
if(type===0){
|
|
|
- if(this.imgKey<=0){
|
|
|
+ if(item.imgIndex<=0){
|
|
|
this.setOverturnTwo()
|
|
|
}else {
|
|
|
- --this.imgKey
|
|
|
+ --item.imgIndex
|
|
|
this.setOverturnImg(item)
|
|
|
}
|
|
|
}else {
|
|
|
- if(this.imgKey>=imgNum){
|
|
|
+ if(item.imgIndex>=imgNum){
|
|
|
this.setOverturnTwo()
|
|
|
}else {
|
|
|
- ++this.imgKey
|
|
|
+ ++item.imgIndex
|
|
|
this.setOverturnImg(item)
|
|
|
}
|
|
|
}
|
|
|
+ console.log('item.imgIndex:'+item.imgIndex)
|
|
|
}
|
|
|
},
|
|
|
setOverturnImg(item){
|
|
|
@@ -237,7 +279,7 @@
|
|
|
this.touchStart(e, index)
|
|
|
},
|
|
|
touchStart(e, index) {
|
|
|
-
|
|
|
+ this.ifLongTap=true
|
|
|
if (this.slideing) return;
|
|
|
if (typeof this.list[index].x === 'undefined' && typeof this.list[index].y === 'undefined') {
|
|
|
this.$set(this.list[index], 'y', 0)
|
|
|
@@ -258,13 +300,14 @@
|
|
|
}
|
|
|
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)
|
|
|
+ // 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
|
|
|
+ this.setBox(this.currentIndex,2)
|
|
|
if (Number.parseInt(this.list[index].x) > 0) {
|
|
|
this.love = Number.parseInt(this.list[index].x) / (100 * 2)
|
|
|
} else {
|
|
|
@@ -296,6 +339,7 @@
|
|
|
this.slideing = false;
|
|
|
this.love = 0;
|
|
|
this.dislike = 0;
|
|
|
+ this.setBox(index+1,3)
|
|
|
}
|
|
|
},
|
|
|
touchEndNext(index) {
|
|
|
@@ -359,8 +403,6 @@
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
-
|
|
|
-
|
|
|
}
|
|
|
.tantan-slide-box {
|
|
|
position: relative;
|
|
|
@@ -410,19 +452,19 @@
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
border-radius: 20rpx;
|
|
|
- //border-radius: 40rpx;
|
|
|
- //background-repeat: no-repeat;//不平铺
|
|
|
- //background-position: center center;//居中
|
|
|
- //background-size: cover;//随容器大小
|
|
|
- //overflow-y: scroll;
|
|
|
- //overflow: hidden;
|
|
|
overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
.tantan-slide-img-scroll-box{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
border-radius: 20rpx;
|
|
|
+ transition: width 100ms,height 100ms;
|
|
|
}
|
|
|
+
|
|
|
.tantan-slide-img{
|
|
|
z-index: 10;
|
|
|
//border-radius: 20rpx 20rpx 0 0;
|
sys