瀑布流
1.首先 在项目中 安装 瀑布流 依赖
npm install --save vue-waterfall2
2.在项目中的main.js 引入
import waterfall from 'vue-waterfall2'
Vue.use(waterfall)
3.在你要写瀑布流的页面写入一下代码
!-- 其他参赛者 list -->
<div class="MSquare-D5">
<div class="container-water-fall" style='width: 100vw;box-sizing: border-box;'>
<waterfall :col='col' :width="itemWidth" :gutterWidth="gutterWidth" :data="list">
<template>
<div class="MSquare-D5S" v-for="(item,index) in list" :key="index">
<div class="MSquare-D5S-Top" @click="gotoDetail(item.student_id)">
<img :src="item.img" alt="" class='MSquare-D5S-Topimg'>
<!-- <span class="MSign-d-LiveLspan">ID:{{item.no}}</span> -->
<span class="MSign-d-LiveLspan" style="height: 6vw;background: rgba(0, 0, 0, 0.5);">{{item.groupName}}</span>
</div>
<div class="MSquare-D5S-Bottom">
<div class="MSquare-D3Rna" @click="gotoDetail(item.student_id)">
<div class='MSquare-D3Rname van-ellipsis' style="font-size:4vw;">{{item.name}}</div>
<div class="MSquare-D3RPai">
<span class='iconfont icon-huo MSign-d-huo'></span>
<span class="MSign-d-look van-ellipsis">{{item.look}}</span>
</div>
</div>
<div class="MSign-d-LiveRlook">
<span class="MSign-d-look van-ellipsis" @click="gotoDetail(item.student_id)">{{item.ming}}</span>
<button class="MSign-d-conSign" style="width:55%;font-size:3.2vw;color:#69501F;height:6.7vw;border-radius: 0.8vw;"
@click="vote(item.id,student_id)">为Ta投人气
</button>
</div>
</div>
</div>
</template>
</waterfall>
</div>
</div>
<!-- 其他参赛者 list -->
<div class="MatchSign-bottom" v-if="MaBottom" style="padding:0vw;">
<img src="../../../assets/mobile/img/matchimg/loading.gif" alt="" v-if="MaBottom1">
<span>{{MaBottom2}}</span>
</div>
<script>
export default {
data() {
return {
// tab 组别
tabarr: [{
'id': -1,
'name': '全部'
}],
tabval: -1, //组别选中的值
user_activity_id: JSON.parse(localStorage.getItem("infos")).activity_id, //赛事报名 活动id
student_id: JSON.parse(localStorage.getItem("infos")).student_id,
// 其他参赛者的 list
list: [],
MaBottom: true,
MaBottom1: true,
MaBottom2: '加载中...',
page: 1, // 分页
is_extending: true, // 如果参赛人员 数据 大于 10 true == 开启请求 false == 关闭请求
col: 2, // 瀑布流 规定几列
}
},
computed: {
/*
* rem布局 计算列宽度
* 可以根据自己的rem设置修改这里的 334 值
*/
itemWidth() {
return (327 * 0.5 * (document.documentElement.clientWidth / 375));
},
/*
* rem布局 计算x轴方向margin(y轴方向的margin自定义在css中即可)
* 可以根据自己的rem设置修改这里的 36 值
*/
gutterWidth() {
return (30 * 0.5 * (document.documentElement.clientWidth / 375));
},
},
created() {
/* 监听 滚动*/
this.listenScroll();
window.addEventListener('beforeunload', e => {
window.scrollTo(0, 0);
})；
},
methods: {
/* 监听 滚动*/
listenScroll() {
let self = this;
if (self.is_extending == true) {
$(window).scroll(function() {
let scrollTop = $(window).scrollTop(); // 滚动条的高度
let windowTop = $(window).height(); // 移动端 手机 的 屏幕高度
let documentTop = $(document).height(); // 页面内容的高度
if (Math.floor(documentTop - (windowTop + scrollTop)) <= 0) { // 页面高度 - 手机屏幕高度 -滚动条的高度
if (self.is_extending == true) {
self.getStudentList();
} else {
self.is_extending = false;
if (self.list.length == 0) {
self.daodiletit = '暂无更多内容！';
HashHeight('暂无更多内容！'); //公共 js 判断是否给html 和 body 添加 height1"
} else {
self.daodiletit = '亲，到底了 ~ ';
}
}
}
});
} else {
self.is_extending = false;
if (self.list.length == 0) {
self.daodiletit = '暂无更多内容！';
HashHeight('暂无更多内容！'); //公共 js 判断是否给html 和 body 添加 height1"
} else {
self.daodiletit = '亲，到底了 ~ ';
}
}
},
/*
* （初始化 、加载更多）数据
* 获取参赛人员列表
* group_id => 组别 id
* student_id 学员 id 用户 id
* verify_status 审核状态 1 = 通过审核
* pageCount 每请求一加載 几条数据
* page 分页
*/
getStudentList() {
this.MaBottom = true;
this.MaBottom1 = true;
this.MaBottom2 = '加载中...';
let data = {
user_activity_id: this.user_activity_id,
verify_status: 1,
pageCount: 3,
page: this.page,
close: true
};
if (this.tabval != -1) {
data['group_id'] = this.tabval; //给对象 动态添加键值对
this.tatalLabel = '本组参赛选手';
} else {
this.tatalLabel = '全部参赛选手';
}
api.get(data, "face/activity/contest/index/list").then(res => {
this.last_page = res.last_page
this.page = res.current_page + 1;
var arr1 = this.list;
var arr = arr1.concat(res.data.map((item) => {
/* item.video_url + "?x-oss-process=video/snapshot,t_1000,m_fast"*/
let obj = {
img: item.photo,
id: item.id,
student_id: item.student_id,
name: item.name,
look: item.vote,
no: item.no,
groupName: item.group.name,
group_id: item.group_id,
};
if (this.tabval != -1) {
obj.ming = "第" + item.groupRank + "名";
} else {
obj.ming = "第" + item.rank + "名";
}
//投票未开始
let currentTime = Date.parse(new Date()) / 1000;
if (this.voteStartTime > currentTime) {
obj.ming = "";
}
return obj
}));
console.log(arr)
let res1 = new Map(); // 数组去重
this.list = arr.filter((arr) => !res1.has(arr.id) && res1.set(arr.id))；// 数组根据id 进行过滤
setTimeout(() => {
this.MaBottom1 = false
if (res.data.length !== 0) {
this.MaBottom2 = '上拉加载';
this.is_extending = true;
} else {
if (this.list.length != 0) {
this.MaBottom2 = '亲 到底了！';
} else {
this.MaBottom2 = '暂无更多参赛学员！';
}
this.is_extending = false;
}
}, 1000);
}).catch(error => {
console.log("组别列表err", error);
});
},
}
}
</script>
<style scoped="">
/* 其他 参赛者 list */
.MSquare-D5 {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.MSquare-D5S {
/* width: 48.5%; */
background: #24232E;
border-radius: 1.3vw;
margin-bottom: 3vw;
/* margin: 0vw 1.5vw 3vw 1.5vw; */
}
.MSquare-D5S-Top {
width: 100%;
/* height: 44.8vw; */
/* overflow: hidden; */
position: relative;
}
.MSquare-D5S-Topimg {
width: 100%;
/* height: 44.8vw; */
}
.MSquare-D5S-Top .MSign-d-LiveLspan {
top: 0vw;
}
.MSquare-D5S-Bottom {
width: 100%;
padding: 3.4vw 3vw;
}
.MSquare-D5S-Bottom .MSquare-D3Rna {
color: #C5C3C4;
font-size: 4vw;
}
.MSquare-D5S-Bottom .MSquare-D3Rname {
color: #C5C3C4;
font-size: 4vw;
}
.MSquare-D5S-Bottom .MSquare-D3RPai {
width: 46%;
}
.MSquare-D5S-Bottom .MSquare-D3RPai .MSign-d-look {
margin-left: 0vw !important;
}
.MSquare-D5S-Bottom .MSign-d-LiveRlook .MSign-d-look {
background: linear-gradient(1deg, rgba(221, 192, 135, 1) 0%, rgba(218, 206, 184, 1) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 3.2vw;
margin-left: 0vw !important;
}
</style>
网友评论