Karlcarlo
0060b2798f
添加多个前端界面所需的图片、字体、音频等静态资源文件，包括： - 管理员后台的图标、背景图、组件图片 - 移动端页面的商品图片、用户中心图片、活动图标 - 第三方库的示例图片和字体文件 - 浏览器兼容性配置文件 - 图标字体文件（eot、ttf、woff、woff2格式） 这些资源是前端界面正常显示所必需的，之前可能因版本控制忽略或遗漏而缺失。
225 lines
6.7 KiB
Vue
225 lines
6.7 KiB
Vue
<template>
|
||
<view :class="'wf-page wf-page'+type">
|
||
<!-- left -->
|
||
<view>
|
||
<view id="left" v-if="leftList.length">
|
||
<view v-for="(item,index) in leftList" :key="index"
|
||
class="wf-item" @tap="itemTap(item)">
|
||
<WaterfallsFlowItem :item="item" :border="border" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- right -->
|
||
<view>
|
||
<view id="right" v-if="rightList.length">
|
||
<view v-for="(item,index) in rightList" :key="index"
|
||
class="wf-item" @tap="itemTap(item)">
|
||
<WaterfallsFlowItem :item="item" :border="border" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import WaterfallsFlowItem from './WaterfallsFlowItem.vue';
|
||
import {LOGIN_STATUS} from '@/config/cache';
|
||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||
export default {
|
||
components: {
|
||
WaterfallsFlowItem
|
||
},
|
||
props: {
|
||
// 瀑布流列表
|
||
wfList: {
|
||
type: Array,
|
||
require: true
|
||
},
|
||
type: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
updateNum: {
|
||
type: Number,
|
||
default: 10
|
||
},
|
||
border:{
|
||
type:Boolean,
|
||
default: false
|
||
},
|
||
isSelf:{
|
||
type:Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
allList: [], // 全部列表
|
||
leftList: [], // 左边列表
|
||
rightList: [], // 右边列表
|
||
mark: 0, // 列表标记
|
||
boxHeight: [], // 下标0和1分别为左列和右列高度
|
||
};
|
||
},
|
||
watch: {
|
||
// 监听列表数据变化
|
||
wfList: {
|
||
handler(nVal,oVal){
|
||
// 如果数据为空或新的列表数据少于旧的列表数据（通常为下拉刷新或切换排序或使用筛选器），初始化变量
|
||
|
||
if (!this.wfList.length ||
|
||
(this.wfList.length === this.updateNum && this.wfList.length <= this.allList.length)) {
|
||
this.allList = [];
|
||
this.leftList = [];
|
||
this.rightList = [];
|
||
this.boxHeight = [];
|
||
this.mark = 0;
|
||
}
|
||
|
||
// 如果列表有值，调用waterfall方法
|
||
|
||
if (this.wfList.length) {
|
||
this.allList = this.wfList;
|
||
this.leftList = [];
|
||
this.rightList = [];
|
||
this.boxHeight = [];
|
||
this.allList.forEach((v, i) => {
|
||
if(this.allList.length < 3 || (this.allList.length <= 7 && this.allList.length - i > 1) || (this.allList.length > 7 && this.allList.length - i > 2)) {
|
||
if(i % 2){
|
||
this.rightList.push(v);
|
||
}else{
|
||
this.leftList.push(v);
|
||
}
|
||
}
|
||
});
|
||
if(this.allList.length < 3){
|
||
this.mark = this.allList.length+1;
|
||
}else if(this.allList.length <= 7){
|
||
this.mark = this.allList.length - 1;
|
||
}else{
|
||
this.mark = this.allList.length - 2;
|
||
}
|
||
if(this.mark < this.allList.length){
|
||
this.waterFall()
|
||
}
|
||
}
|
||
},
|
||
immediate: true,
|
||
deep:true
|
||
},
|
||
mounted(){
|
||
},
|
||
|
||
// 监听标记，当标记发生变化，则执行下一个item排序
|
||
mark() {
|
||
const len = this.allList.length;
|
||
if (this.mark < len && this.mark !== 0 && this.boxHeight.length) {
|
||
this.waterFall();
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// 瀑布流排序
|
||
waterFall() {
|
||
const i = this.mark;
|
||
if (i == 0) {
|
||
// 初始化，从左边开始插入
|
||
this.leftList.push(this.allList[i]);
|
||
// 更新左边列表高度
|
||
this.getViewHeight(0);
|
||
} else if (i == 1) {
|
||
// 第二个item插入，默认为右边插入
|
||
this.rightList.push(this.allList[i]);
|
||
// 更新右边列表高度
|
||
this.getViewHeight(1);
|
||
} else {
|
||
// 根据左右列表高度判断下一个item应该插入哪边
|
||
if(!this.boxHeight.length){
|
||
this.rightList.length < this.leftList.length
|
||
? this.rightList.push(this.allList[i])
|
||
: this.leftList.push(this.allList[i]);
|
||
} else {
|
||
const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
|
||
if (leftOrRight) {
|
||
this.rightList.push(this.allList[i])
|
||
} else {
|
||
this.leftList.push(this.allList[i])
|
||
}
|
||
}
|
||
// 更新插入列表高度
|
||
this.getViewHeight();
|
||
}
|
||
},
|
||
// 获取列表高度
|
||
getViewHeight() {
|
||
// 使用nextTick，确保页面更新结束后，再请求高度
|
||
this.$nextTick(() => {
|
||
setTimeout(()=>{
|
||
uni.createSelectorQuery().in(this).select('#right').boundingClientRect(res => {
|
||
res ? this.boxHeight[1] = res.height : '';
|
||
uni.createSelectorQuery().in(this).select('#left').boundingClientRect(res => {
|
||
res ? this.boxHeight[0] = res.height : '';
|
||
this.mark = this.mark + 1;
|
||
}).exec();
|
||
}).exec();
|
||
},100)
|
||
})
|
||
},
|
||
// item点击
|
||
itemTap(item) {
|
||
if(item.content_type == 1){
|
||
uni.navigateTo({
|
||
url: '/pages/discover/discoverDetails/index?id=' + item.id
|
||
})
|
||
}else{
|
||
let that = this;
|
||
if(this.isSelf){
|
||
uni.navigateTo({
|
||
// #ifdef MP || H5
|
||
url: '/pages/discover/discoverVideo/index?id=' + item.id + '&relation_id=' + item.relation_id
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
url: `/pages/discover/discoverVideo/app?url=${HTTP_REQUEST_URL}/pages/discover/discoverVideo/index?content_type=2&token=${that.$Cache.get(LOGIN_STATUS)}&relation_id=${item.relation_id}`
|
||
// #endif
|
||
})
|
||
}else{
|
||
// #ifdef MP || H5
|
||
uni.navigateTo({
|
||
url: '/pages/discover/discoverVideo/index?id=' + item.id
|
||
})
|
||
// #endif
|
||
// #ifdef APP-PLUS
|
||
let href = encodeURIComponent(`${HTTP_REQUEST_URL}/pages/discover/discoverVideo/index?content_type=2&id=${item.id}&token=${that.$Cache.get(LOGIN_STATUS)}`)
|
||
uni.navigateTo({
|
||
url: `/pages/discover/discoverVideo/app?url=${href}`
|
||
})
|
||
// #endif
|
||
}
|
||
|
||
}
|
||
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
$page-padding: 10px;
|
||
$grid-gap: 10px;
|
||
|
||
.wf-page {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
grid-gap: $grid-gap;
|
||
}
|
||
.wf-item {
|
||
width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);
|
||
padding-bottom: $grid-gap;
|
||
}
|
||
.wf-page1 .wf-item{
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
padding-bottom: 0;
|
||
}
|
||
</style> |