定义不同的waterfall的ref

This commit is contained in:
haiyangcui
2020-11-01 17:24:29 +01:00
parent 34e6b8bd08
commit 22b877b0fb
3 changed files with 9 additions and 8 deletions

View File

@@ -29,14 +29,14 @@
</div>
<div class="listpage-body" id="film-body" infinite-wrapper>
<div class="show-picture" v-if="setting.view === 'picture' && !show.find">
<Waterfall ref="waterfall" :list="list" :gutter="20" :width="240"
<Waterfall ref="filmWaterfall" :list="list" :gutter="20" :width="240"
:breakpoints="{ 1200: { rowPerView: 4 } }"
animationEffect="fadeInUp"
backgroundColor="rgba(0, 0, 0, 0)">
<template slot="item" slot-scope="props">
<div class="card" v-show="!setting.excludeR18Films || !containsR18Keywords(props.data.type)">
<div class="img">
<img style="width: 100%" :src="props.data.pic" alt="" @load="$refs.waterfall.refresh()" @click="detailEvent(site, props.data)">
<img style="width: 100%" :src="props.data.pic" alt="" @load="$refs.filmWaterfall.refresh()" @click="detailEvent(site, props.data)">
<div class="operate">
<div class="operate-wrap">
<span class="o-play" @click="playEvent(site, props.data)">播放</span>
@@ -462,7 +462,7 @@ export default {
changeView () {
if (this.view === 'Film') {
if (this.setting.view === 'picture') {
this.$refs.waterfall.refresh()
this.$refs.filmWaterfall.refresh()
}
this.getPage().then(() => {
this.infiniteId += 1

View File

@@ -71,7 +71,7 @@
</el-table>
</div>
<div class="show-picture" id="star-picture" v-show="viewMode === 'picture'">
<Waterfall ref="waterfall" :list="filteredRecommandations" :gutter="20" :width="240"
<Waterfall ref="recommandataionsWaterfall" :list="filteredRecommandations" :gutter="20" :width="240"
:breakpoints="{ 1200: { rowPerView: 4 } }"
animationEffect="fadeInUp"
backgroundColor="rgba(0, 0, 0, 0)">
@@ -81,7 +81,7 @@
<div class="rate" v-if="props.data.rate && props.data.rate !== '暂无评分'">
<span>{{props.data.rate}}</span>
</div>
<img style="width: 100%" :src="props.data.detail.pic" alt="" @load="$refs.waterfall.refresh()" @click="detailEvent(props.data)">
<img style="width: 100%" :src="props.data.detail.pic" alt="" @load="$refs.recommandataionsWaterfall.refresh()" @click="detailEvent(props.data)">
<div class="operate">
<div class="operate-wrap">
<span class="o-play" @click="playEvent(props.data)">播放</span>
@@ -171,7 +171,7 @@ export default {
view () {
if (this.view === 'Recommandation') {
this.getRecommandations()
this.$refs.waterfall.refresh()
this.$refs.recommandataionsWaterfall.refresh()
}
}
},

View File

@@ -77,7 +77,7 @@
</el-table>
</div>
<div class="show-picture" id="star-picture" v-show="viewMode === 'picture'">
<Waterfall ref="waterfall" :list="list" :gutter="20" :width="240"
<Waterfall ref="starWaterfall" :list="list" :gutter="20" :width="240"
:breakpoints="{ 1200: { rowPerView: 4 } }"
animationEffect="fadeInUp"
backgroundColor="rgba(0, 0, 0, 0)">
@@ -90,7 +90,7 @@
<div class="update" v-if="props.data.hasUpdate">
<span>有更新</span>
</div>
<img style="width: 100%" :src="props.data.detail.pic" alt="" @load="$refs.waterfall.refresh()" @click="detailEvent(props.data)">
<img style="width: 100%" :src="props.data.detail.pic" alt="" @load="$refs.starWaterfall.refresh()" @click="detailEvent(props.data)">
<div class="operate">
<div class="operate-wrap">
<span class="o-play" @click="playEvent(props.data)">播放</span>
@@ -173,6 +173,7 @@ export default {
if (this.view === 'Star') {
this.getAllsites()
this.getFavorites()
this.$refs.starWaterfall.refresh()
}
}
},