|
|
@@ -19,9 +19,14 @@
|
|
|
}]">
|
|
|
<!-- 加载图片会闪屏 双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>
|
|
|
|
|
|
- <image class="tantan-slide-img" mode="aspectFill" :src="item.image" ></image>
|
|
|
-
|
|
|
<view v-if="index === currentIndex">
|
|
|
<view class="tantan-slide-box-icon tantan-slide-box-dislike"
|
|
|
:style="{
|
|
|
@@ -45,7 +50,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
+ import tools from "@/service/tools";
|
|
|
+
|
|
|
+ export default {
|
|
|
name: "slide",
|
|
|
props: {
|
|
|
list: {
|
|
|
@@ -77,8 +84,19 @@
|
|
|
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)
|
|
|
@@ -86,6 +104,55 @@
|
|
|
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) {
|
|
|
@@ -200,10 +267,8 @@
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
-<style>
|
|
|
- /* fa547c f8ba35 */
|
|
|
+<style lang="scss">
|
|
|
.tantan-slide {
|
|
|
- /* background-color: #2196f3; */
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
@@ -211,7 +276,6 @@
|
|
|
align-items: center;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
-
|
|
|
.tantan-slide-box {
|
|
|
position: relative;
|
|
|
width: calc(100vw - 32rpx);
|
|
|
@@ -221,7 +285,6 @@
|
|
|
transform-style: preserve-3d;
|
|
|
margin: auto;
|
|
|
}
|
|
|
-
|
|
|
.tantan-slide-box-item {
|
|
|
transform-style: preserve-3d;
|
|
|
display: flex;
|
|
|
@@ -233,27 +296,8 @@
|
|
|
transform: translate3d(0px, 0px, 0px) rotate(0deg);
|
|
|
transition: 300ms;
|
|
|
color: #fff;
|
|
|
- /* display: none; */
|
|
|
- }
|
|
|
|
|
|
- .tantan-slide-box-item.on {
|
|
|
- /* opacity: 1; */
|
|
|
- display: block;
|
|
|
}
|
|
|
-
|
|
|
- .tantan-slide-box-item-bg {
|
|
|
- height: 380rpx;
|
|
|
- background-image: linear-gradient(to bottom, transparent, #000000 70%);
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- margin: auto;
|
|
|
- z-index: 1;
|
|
|
- border-bottom-right-radius: 40rpx;
|
|
|
- border-bottom-left-radius: 40rpx;
|
|
|
- }
|
|
|
-
|
|
|
.tantan-slide-box-icon {
|
|
|
position: absolute;
|
|
|
width: 70rpx;
|
|
|
@@ -268,51 +312,48 @@
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
}
|
|
|
-
|
|
|
.tantan-slide-box-love {
|
|
|
left: 50rpx;
|
|
|
}
|
|
|
-
|
|
|
.tantan-slide-box-dislike {
|
|
|
right: 50rpx;
|
|
|
}
|
|
|
-
|
|
|
- .tantan-slide-img {
|
|
|
+ .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%;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
- .tantan-slide-img.on{
|
|
|
- transform: scale(1);
|
|
|
- width: 50rpx;
|
|
|
- height: 50rpx;
|
|
|
- }
|
|
|
- .tantan-slide-box-info{
|
|
|
- padding: 0 32rpx;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- .tantan-slide-box-info .title{
|
|
|
- font-size: 64rpx;
|
|
|
- line-height: 1.2;
|
|
|
- text-shadow: 0 0 10rpx rgb(0, 0, 0, 0.5);
|
|
|
- }
|
|
|
- .tantan-slide-box-info .desc{
|
|
|
- font-size: 32rpx;
|
|
|
- line-height: 1.2;
|
|
|
- margin-top: 30rpx;
|
|
|
- text-shadow: 0 0 10rpx rgb(0, 0, 0, 0.5);
|
|
|
- }
|
|
|
- .tantan-slide-box-info .tags{
|
|
|
- margin-top: 24rpx;
|
|
|
- }
|
|
|
- .tantan-slide-box-info .tag{
|
|
|
- height: 48rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- padding: 0 16rpx;
|
|
|
- line-height: 48rpx;
|
|
|
- background-color: rgba(255, 255,255,0.3);
|
|
|
- border-radius: 10rpx;
|
|
|
- }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
</style>
|
sys