Skip to content

F
founder_vue
Commit 0c3afb7e by maxiaohan
Options

Merge remote-tracking branch 'origin/dev_zwpt' into dev_zwpt

parents 378e78bc bd69bf36
Showing with 367 additions and 1 deletions
src/components/swiper.vue 0 → 100644
<template>
<div>
<transition name="fade">
<div @touchend="end" @touchstart="start" @touchmove="move" class="swiper">
<div
@click="chooseItem(item, index)"
v-for="(item, index) in imgs"
:style="config5[index]"
:key="item.cover"
>
<img :src="item.cover" style="width: 100%; height: 100%" />
</div>
</div>
</transition>
<h1 @click="prev">上一个</h1>
<h1 @click="next">下一个</h1>
<h1>当前：{{ centerInfo.id }}</h1>
<h1
@click="chooseItem(item, index)"
v-for="(item, index) in imgs"
:key="item.cover"
class="swperNum"
>
{{ index }}
</h1>
</div>
</template>
<script>
export default {
name: "zt",
data() {
return {
loading: true,
currentIndex: 3, //当前中间imgs数组中index
centerInfo: "", // 当前中间信息
startX: "",
endX: "",
imgs: [
{
id: "莱因哈特1",
index: 0,
cover:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf",
},
{
id: "安娜2",
index: 1,
cover:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf",
},
{
id: "卢西奥3",
index: 2,
cover:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf",
},
{
id: "DVA4",
index: 3,
cover:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf",
},
{
id: "莫伊拉5",
index: 4,
cover:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf",
},
{
id: "裂空6",
index: 5,
cover:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf",
},
{
id: "麦克雷7",
index: 6,
cover:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf",
},
{
id: "士兵76 8",
index: 7,
cover:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf",
},
{
id: "狂鼠9",
index: 8,
cover:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf",
},
{
id: "死神 10",
index: 9,
cover:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf",
},
{
id: "禅雅塔 11",
index: 10,
cover:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf",
},
{
id: "黑百合 12",
index: 11,
cover:
"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F945cad7c7105d352aa3c513c94846bb0c2f1a61342067-OWFZcE_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639222834&t=e54dd111b99d115d33f09f237530dcbf",
},
],
previous: 0,
config5: [
{
id: "-A",
position: "absolute",
width: "22%",
height: "72%",
top: "19.2%",
left: "20%",
opacity: 0,
zIndex: 0,
transition: ".4s",
},
{
id: "A",
position: "absolute",
width: "22%",
height: "72%",
top: "19.2%",
left: "17%",
opacity: 1,
zIndex: 1,
transition: ".4s",
},
{
id: "B",
position: "absolute",
width: "28%",
height: "82%",
top: "14%",
left: "22%",
opacity: 1,
zIndex: 2,
transition: ".4s",
},
{
id: "center",
position: "absolute",
width: "45%",
height: "100%",
top: "0px",
left: "50%",
marginLeft: "-22.5%",
opacity: 1,
zIndex: 4,
transition: ".4s",
},
{
id: "D",
position: "absolute",
width: "28%",
height: "82%",
top: "14%",
left: "50%",
opacity: 1,
zIndex: 2,
transition: ".4s",
},
{
id: "E",
position: "absolute",
width: "22%",
height: "72%",
top: "19.2%",
left: "60%",
opacity: 1,
zIndex: 1,
transition: ".4s",
},
{
id: "E+",
position: "absolute",
width: "22%",
height: "72%",
top: "19.2%",
left: "60%",
opacity: 0,
zIndex: 0,
transition: ".4s",
},
],
};
},
methods: {
// 获取数据
async getData() {
this.$nextTick(() => {
this.loading = false;
});
},
bianhua(num) {
this.currentIndex = num - 1;
if (this.currentIndex > this.imgs.length - 1) {
this.currentIndex = 0;
}
this.centerCard();
this.centerIndex("next");
},
// 滑动上一个
prev(index) {
// this.imgs.unshift(this.imgs.pop());
this.config5.push(this.config5.shift());
this.currentIndex = this.currentIndex - 1;
if (this.currentIndex < 0) {
this.currentIndex = this.imgs.length - 1;
}
this.centerCard();
this.centerIndex("prev");
},
// 滑动下一个
next() {
// this.imgs.push(this.imgs.shift());
this.config5.unshift(this.config5.pop());
this.currentIndex = this.currentIndex + 1;
if (this.currentIndex > this.imgs.length - 1) {
this.currentIndex = 0;
}
this.centerCard();
this.centerIndex("next");
// console.log(this.currentIndex);
},
// 开始移动端滑动屏幕
start(event) {
this.startX = event.changedTouches[0].clientX;
this.startY = event.changedTouches[0].clientY;
},
// 连续滑动
move(event) {
this.endY = event.changedTouches[0].clientY;
this.endX = event.changedTouches[0].clientX;
this.stopDefault(event);
// 如果是滑动，注解（223行到231行）这段。如果是连续滑动，放开（223行到231行）注解
this.interval = this.endX - this.startX;
if (this.interval > 40) {
this.startX = this.endX;
this.prev();
}
if (this.interval < -40) {
this.startX = this.endX;
this.next();
}
},
// 滑动
end(event) {
// 如果是滑动，放开（236行到238行）的注解。如果是连续滑动，注解（236行到238行）
// this.endY = event.changedTouches[0].clientY;
// this.endX = event.changedTouches[0].clientX;
// this.formatSwiper();
},
formatSwiper() {
if (this.startX > this.endX) {
console.log("左边滑动");
if (this.startX > this.endX + 40) {
this.next();
}
} else {
console.log("右边滑动");
if (this.endX > this.startX + 40) {
this.prev();
}
}
},
// 阻止touchmove的横向默认事件（ios快捷操作会关闭页面）
stopDefault(event) {
let differenceY = this.endY - this.startY;
let differenceX = this.endX - this.startX;
if (Math.abs(differenceX) > Math.abs(differenceY)) {
event.preventDefault();
}
},
// 当前imgs在位置上的index（并非img数组的index）
centerIndex(val) {
if (val == "prev") {
for (let val of this.imgs) {
if (val.index == this.imgs.length - 1) {
val.index = 0;
} else {
val.index = val.index + 1;
}
}
} else {
for (let val of this.imgs) {
if (val.index == 0) {
val.index = this.imgs.length - 1;
} else {
val.index = val.index - 1;
}
}
}
},
// 点击
chooseItem(item, index) {
let cycles = item.index;
if (item.index < 3) {
for (let i = 0; i < 3 - cycles; i++) {
console.log(item.index);
this.prev();
}
} else if (item.index > 3) {
for (let i = -1; i < item.index - 3; i++) {
this.next();
}
} else if (item.index == 3) {
console.log("投票");
}
},
// 计算中间卡片信息
centerCard() {
this.centerInfo = this.imgs[this.currentIndex];
this.$emit("centerInfo", this.centerInfo);
},
addCardStyle() {
if (this.imgs.length > 7) {
let addtime = this.imgs.length - 7;
for (let i = 0; i < addtime; i++) {
console.log("add");
this.config5.push({
id: "center",
position: "absolute",
width: "45%",
height: "100%",
top: "0px",
left: "50%",
marginLeft: "-22.5%",
opacity: 0,
transition: ".1s",
});
}
}
},
},
created() {
this.getData();
this.centerCard(); // 获取中间卡片信息
this.addCardStyle(); // 加入样式位置的index
},
};
</script>
<style lang="scss" scoped>
.swiper {
width: 100%;
border: 1px red solid;
height: 400px;
position: relative;
overflow: hidden;
div {
opacity: 0;
}
}
</style>
\ No newline at end of file
src/views/cxyrd/TT.vue
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<div class="rd-btn" @click="Rdwc">认定完成</div> <div class="rd-btn" @click="Rdwc">认定完成</div>
</div> </div>
</div> </div>
<Swiper />
<div class="main"> <div class="main">
<div class="data"> <div class="data">
<!-- 卡片源数据--> <!-- 卡片源数据-->
...@@ -632,6 +632,7 @@ import TTPlam from "./modules/TTPlam.vue"; ...@@ -632,6 +632,7 @@ import TTPlam from "./modules/TTPlam.vue";
import TTFace from "./modules/TTFace.vue"; import TTFace from "./modules/TTFace.vue";
import Utils from "@/utils/util.js"; import Utils from "@/utils/util.js";
import "@/icons/error.svg"; import "@/icons/error.svg";
import Swiper from '@/components/swiper.vue'
export default { export default {
name: "TT", name: "TT",
...@@ -640,6 +641,7 @@ export default { ...@@ -640,6 +641,7 @@ export default {
TTFace, TTFace,
swiper, swiper,
swiperSlide, swiperSlide,
Swiper
}, },
data() { data() {
return { return {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment