|
|
@@ -23,64 +23,61 @@
|
|
|
}]">
|
|
|
<!-- -->
|
|
|
<!-- 加载图片会闪屏 双if避免 -->
|
|
|
+<!-- v-if="currentIndex + visible >= index && currentIndex <= index"-->
|
|
|
<template v-if="currentIndex + visible >= index && currentIndex <= index">
|
|
|
+ <view v-show="currentIndex===index || ifLongTap" class="tantan-slide-img-box":animation="currentIndex===index?animationData:null" :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>-->
|
|
|
+ <image :style="{height: item.boxHeight + 'px',width:item.boxWidth+'px'}" mode="aspectFill" :src="item.image" ></image>
|
|
|
|
|
|
- <view class="tantan-slide-bg" :animation="currentIndex===index?animationData:{}">
|
|
|
- <view class="tantan-slide-img-box" :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>-->
|
|
|
- <image :style="{height: item.boxHeight + 'px',width:item.boxWidth+'px'}" mode="aspectFill" :src="item.image" ></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===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 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" v-if="index === currentIndex">
|
|
|
+ <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="{
|
|
|
@@ -128,7 +125,7 @@
|
|
|
move: 0,
|
|
|
end: 0
|
|
|
},
|
|
|
- visible: 3,
|
|
|
+ visible: 2,
|
|
|
/*下标*/
|
|
|
currentIndex: 0,
|
|
|
/*滑动*/
|
|
|
@@ -140,9 +137,11 @@
|
|
|
imgKey:0,
|
|
|
overturnType:0,
|
|
|
animationData:null,
|
|
|
+ animationIndex:0,
|
|
|
ifLongTap: false,
|
|
|
isSlide:false,
|
|
|
slideServe:false,
|
|
|
+ isMove:false,
|
|
|
}
|
|
|
},
|
|
|
watch:{
|
|
|
@@ -170,11 +169,11 @@
|
|
|
this.list[index].boxWidth=this.winWidth-18
|
|
|
this.list[index].boxHeight=this.winHeight
|
|
|
}else if(type===2){
|
|
|
- this.list[index].boxWidth=this.winWidth-26
|
|
|
+ this.list[index].boxWidth=this.winWidth-23
|
|
|
this.list[index].boxHeight=this.winHeight-20
|
|
|
}else {
|
|
|
- this.list[index].boxWidth=this.winWidth-32
|
|
|
- this.list[index].boxHeight=this.winHeight-32
|
|
|
+ this.list[index].boxWidth=this.winWidth-28
|
|
|
+ this.list[index].boxHeight=this.winHeight-30
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
@@ -222,13 +221,15 @@
|
|
|
}
|
|
|
setTimeout(()=>{
|
|
|
this.animationData=null
|
|
|
- },120)
|
|
|
+ },300)
|
|
|
console.log('item.imgIndex:'+item.imgIndex)
|
|
|
}
|
|
|
},
|
|
|
setOverturnImg(item){
|
|
|
+ this.animationData=true
|
|
|
tools.vibrate()
|
|
|
item.image=item.images[item.imgIndex]
|
|
|
+ // return true;
|
|
|
let animation = uni.createAnimation({
|
|
|
duration: 100,
|
|
|
timingFunction: 'ease',
|
|
|
@@ -339,9 +340,7 @@
|
|
|
return (angleNum*1).toFixed(6);
|
|
|
},
|
|
|
touchEnd(index) {
|
|
|
- if(this.ifLongTap){
|
|
|
- this.ifLongTap=false
|
|
|
- }
|
|
|
+
|
|
|
// if (this.isSlide) return
|
|
|
if (this.slideing) return
|
|
|
this.swipering = false;
|
|
|
@@ -364,6 +363,7 @@
|
|
|
this.list[index].moveX = 0;
|
|
|
this.list[index].angleNum = 0;
|
|
|
this.slideing = false;
|
|
|
+ this.ifLongTap=false
|
|
|
this.love = 0;
|
|
|
this.dislike = 0;
|
|
|
this.setBox(index+1,3)
|
|
|
@@ -394,6 +394,7 @@
|
|
|
this.y.move = 0
|
|
|
this.slideing = false
|
|
|
this.btnClickType = false
|
|
|
+ this.ifLongTap=false
|
|
|
this.love = 0
|
|
|
this.dislike = 0
|
|
|
resolve()
|
|
|
@@ -477,9 +478,6 @@
|
|
|
.tantan-slide-box-dislike {
|
|
|
right: 50rpx;
|
|
|
}
|
|
|
- .tantan-slide-bg{
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
.tantan-slide-img-box {
|
|
|
position: relative;
|
|
|
will-change: transform;
|
sys