|
|
|
<template>
|
|
|
|
<LayoutApp :show-back="true">
|
|
|
|
<div class="scroll-list-wrap">
|
|
|
|
<template v-if="isShow">
|
|
|
|
<div v-for="(item, index) in channelList.list" v-if="item.template_name == 'guessLike'">
|
|
|
|
<ScrollNav :list="item.data.list"></ScrollNav>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<Scroll
|
|
|
|
ref="scroll"
|
|
|
|
:scroll-events="scrollEvents"
|
|
|
|
@scroll="scrollHandler"
|
|
|
|
:options="options"
|
|
|
|
@pulling-up="onPullingUp"
|
|
|
|
:data="productList.list">
|
|
|
|
<div class="body" ref="body">
|
|
|
|
<div class="channel-top"></div>
|
|
|
|
<div class="marginTop">
|
|
|
|
<div v-for="(item, index) in channelList.list" :key="index" class="space-between">
|
|
|
|
<Swiper :list="item.data" v-if="item.template_name == 'threePicture'"/>
|
|
|
|
<Hot :list="item.data.list" v-if="item.template_name == 'image_list'" />
|
|
|
|
<Banner :list="item.data" v-if="item.template_name == 'single_image'" />
|
|
|
|
<TwoBanner :list="item.data" v-if="item.template_name == 'twoPicture'" />
|
|
|
|
<template v-if="!isShow">
|
|
|
|
<div ref="sss" v-if="item.template_name == 'guessLike'">
|
|
|
|
<ScrollNav :list="item.data.list"></ScrollNav>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div :style="{minHeight: total + 'px'}">
|
|
|
|
<ProductList :list="productList.list" v-if="productList.list.length > 0" class="bgColor"></ProductList>
|
|
|
|
<UfoNoItem :tip="`暂无数据`" v-else></UfoNoItem>
|
|
|
|
<LayoutApp :show-back="true" :hide-header="hideHeader">
|
|
|
|
<div class="scroll-list-wrap">
|
|
|
|
<template v-if="!isShow">
|
|
|
|
<div v-for="(item, index) in channelList.list" v-if="item.template_name == 'guessLike'">
|
|
|
|
<ScrollNav :list="item.data.list" :cur="cur"></ScrollNav>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<Scroll
|
|
|
|
ref="scroll"
|
|
|
|
:scroll-events="scrollEvents"
|
|
|
|
@scroll="scrollHandler"
|
|
|
|
:options="options"
|
|
|
|
@pulling-up="onPullingUp"
|
|
|
|
:data="productList.list">
|
|
|
|
<div class="body" ref="body">
|
|
|
|
<div class="channel-top"></div>
|
|
|
|
<div class="marginTop">
|
|
|
|
<div v-for="(item, index) in channelList.list" :key="index" class="space-between">
|
|
|
|
<Swiper :list="item.data" v-if="item.template_name == 'threePicture'"/>
|
|
|
|
<Hot :list="item.data.list" v-if="item.template_name == 'image_list'"/>
|
|
|
|
<Banner :list="item.data" v-if="item.template_name == 'single_image'"/>
|
|
|
|
<TwoBanner :list="item.data" v-if="item.template_name == 'twoPicture'"/>
|
|
|
|
<template v-if="!isShow">
|
|
|
|
<div ref="sss" v-if="item.template_name == 'guessLike'">
|
|
|
|
<ScrollNav :list="item.data.list" :cur="cur" @transfer="getIndex"></ScrollNav>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Scroll>
|
|
|
|
</div>
|
|
|
|
<div :style="{minHeight: total + 'px'}">
|
|
|
|
<ProductList :list="productList.list" v-if="productList.list.length > 0" class="bgColor"></ProductList>
|
|
|
|
<UfoNoItem :tip="`暂无数据`" v-else></UfoNoItem>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Scroll>
|
|
|
|
</div>
|
|
|
|
</LayoutApp>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import { Style, Scroll, Sticky } from 'cube-ui'
|
|
|
|
import { Style, Scroll, Sticky } from 'cube-ui';
|
|
|
|
import { createNamespacedHelpers } from 'vuex';
|
|
|
|
import Swiper from './components/swiper';
|
|
|
|
import Banner from './components/banner';
|
|
...
|
...
|
@@ -54,6 +54,7 @@ const { mapState, mapActions } = createNamespacedHelpers('home/channel'); |
|
|
|
const { mapState: mapStateList, mapActions: mapActionsList } = createNamespacedHelpers('list');
|
|
|
|
|
|
|
|
export default {
|
|
|
|
props: ['hideHeader'],
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
options: {
|
|
...
|
...
|
@@ -69,7 +70,8 @@ export default { |
|
|
|
isShow: false,
|
|
|
|
total: 0,
|
|
|
|
marginTop: 0,
|
|
|
|
}
|
|
|
|
cur: 0,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapState(['channelList']),
|
|
...
|
...
|
@@ -80,28 +82,25 @@ export default { |
|
|
|
isPage: true,
|
|
|
|
isHome: true,
|
|
|
|
}
|
|
|
|
this.fetchChannelList().then((res)=>{
|
|
|
|
this.fetchChannelList().then((res) => {
|
|
|
|
let windowH = document.documentElement.clientHeight || document.body.clientHeight;
|
|
|
|
this.navTop = this.$refs.sss[0].offsetTop;
|
|
|
|
this.navHeight = this.$refs.sss[0].offsetHeight;
|
|
|
|
|
|
|
|
let windowH = document.documentElement.clientHeight || document.body.clientHeight;
|
|
|
|
this.total = windowH - this.navHeight;
|
|
|
|
console.log(windowH);
|
|
|
|
console.log(this.navHeight);
|
|
|
|
console.log(this.total);
|
|
|
|
console.log("______");
|
|
|
|
|
|
|
|
});
|
|
|
|
this.fetchProductList(params);
|
|
|
|
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
getIndex(index) {
|
|
|
|
this.cur = index;
|
|
|
|
console.log(this.cur);
|
|
|
|
},
|
|
|
|
scrollHandler({ y }) {
|
|
|
|
let scrollY = Math.abs(parseInt(y));
|
|
|
|
if(scrollY >= this.navTop) {
|
|
|
|
if (scrollY >= this.navTop) {
|
|
|
|
this.isShow = true;
|
|
|
|
this.marginTop = 0;
|
|
|
|
} else {
|
|
...
|
...
|
@@ -116,9 +115,9 @@ export default { |
|
|
|
const params = {
|
|
|
|
isReset: false,
|
|
|
|
isHome: true,
|
|
|
|
}
|
|
|
|
};
|
|
|
|
await this.fetchProductList(params);
|
|
|
|
this.$refs.scroll.forceUpdate()
|
|
|
|
this.$refs.scroll.forceUpdate();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
|
...
|
...
|
@@ -144,9 +143,11 @@ export default { |
|
|
|
height: 310px;
|
|
|
|
background: #08304B;
|
|
|
|
}
|
|
|
|
|
|
|
|
.marginTop {
|
|
|
|
margin-top: -150px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.scroll-app {
|
|
|
|
position: absolute;
|
|
|
|
top: 0;
|
|
...
|
...
|
@@ -163,27 +164,33 @@ export default { |
|
|
|
-webkit-flex-direction: column;
|
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
|
|
|
|
.scroll-flex {
|
|
|
|
-webkit-box-flex: 1;
|
|
|
|
-webkit-flex: 1;
|
|
|
|
flex: 1;
|
|
|
|
overflow: hidden;
|
|
|
|
position: relative;
|
|
|
|
-webkit-box-flex: 1;
|
|
|
|
-webkit-flex: 1;
|
|
|
|
flex: 1;
|
|
|
|
overflow: hidden;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
.scroll-list-wrap {
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.body {
|
|
|
|
height: 100%;
|
|
|
|
overflow-y: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.space-between {
|
|
|
|
padding: 0 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bgColor {
|
|
|
|
background: #f5f5f5;
|
|
|
|
}
|
|
|
|
|
|
|
|
.navFixed {
|
|
|
|
width: 100%;
|
|
|
|
position: fixed;
|
...
|
...
|
|
