MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化同城页面

Browse Source
This commit is contained in:
zyronon 2021-08-21 02:15:09 +08:00
parent b6571b96d5
commit 9af68e46f7
3 changed files with 709 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/scss/utils.less
View File

@ -133,7 +133,7 @@ font
.f(40);
.f(@n, @i: 10) when (@i =< @n) {
.f@{i} {
margin-left: (1px * @i) !important;
font-size: (1px * @i) !important;
}
.f(@n, (@i + 1));
}

85
src/pages/home/Attention.vue
View File

@ -1,6 +1,6 @@
<template>
<div id="attention">
<header>
<header ref="header1">
<span @click="$nav('/country-choose')">双流</span>
<div class="arrow"></div>
</header>
@ -10,7 +10,8 @@
@touchmove="move"
@touchend="end"
>
<div ref="wrapper" class="wrapper">
<div ref="wrapper" class="wrapper"
>
<div class="header" ref="header">
<Loading :isFullScreen="false"></Loading>
</div>
@ -204,7 +205,13 @@ export default {
LIVE: 3,
},
isTop: false,
startLocationY: 0
isFixed: true,
startLocationY: 0,
ref: {
scroller: null,
wrapper: null,
header1: null,
}
}
},
created() {
@ -264,44 +271,66 @@ export default {
}
this.items.push(temp)
}
this.items = this.items.concat(this.items)
// this.$console(this.items)
setTimeout(() => {
this.ref.scroller = this.$refs["scroller"]
this.ref.wrapper = this.$refs["wrapper"]
this.ref.header1 = this.$refs["header1"]
})
},
methods: {
start(e) {
let wrapper = this.$refs["wrapper"]
wrapper.style.transition = `none`
this.ref.header1.style.transition = this.ref.scroller.style.transition = this.ref.wrapper.style.transition = `none`
this.startLocationY = e.touches[0].pageY
},
move(e) {
let scroller = this.$refs["scroller"]
let wrapper = this.$refs["wrapper"]
let header = this.$refs["header"]
this.isTop = scroller.scrollTop === 0
this.isTop = this.ref.scroller.scrollTop === 0
// console.log('scrollTop', scroller.scrollTop)
let touchMoveDistance = e.touches[0].pageY - this.startLocationY
console.log('touchMoveDistance', touchMoveDistance)
//
// console.log('touchMoveDistance', touchMoveDistance)
// let transformY = this.$getTransform(header)
let headerHeight = 80
if (this.isTop) {
// this.$setCss(wrapper,'tr')
if (touchMoveDistance > 0) {
let transformY = this.$getTransform(header)
// header.style.transform = `translate3d(0,${touchMoveDistance > 40 ? 40 : touchMoveDistance}px,0)`
wrapper.style.transform = `translate3d(0,${touchMoveDistance > headerHeight ? headerHeight : touchMoveDistance}px,0)`
let header1Height = 50
if (touchMoveDistance > 0) {
if (!this.isFixed) {
if (Math.abs(touchMoveDistance) < header1Height) {
this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${touchMoveDistance - header1Height}px,0)`
} else {
this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${0}px,0)`
}
}
if (this.isTop) {
this.ref.wrapper.style.transform = `translate3d(0,${touchMoveDistance > headerHeight ? headerHeight : touchMoveDistance}px,0)`
} else {
wrapper.style.transform = `translate3d(0,${touchMoveDistance < -headerHeight ? -headerHeight : touchMoveDistance}px,0)`
// this.startLocationY = e.touches[0].pageY
}
} else {
// wrapper.style.height = '100vh'
this.startLocationY = e.touches[0].pageY
if (this.isFixed) {
if (Math.abs(touchMoveDistance) < header1Height) {
this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${touchMoveDistance}px,0)`
} else {
this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${-header1Height}px,0)`
}
}
}
console.log('isTop', this.isTop)
// console.log('isTop', this.isTop)
},
end() {
let wrapper = this.$refs["wrapper"]
// wrapper.style.transition = `all .3s`
// wrapper.style.transform = `translate3d(0,0,0)`
let header1Height = 50
this.ref.header1.style.transition = this.ref.scroller.style.transition = this.ref.wrapper.style.transition = `all .3s`
this.ref.wrapper.style.transform = `translate3d(0,0,0)`
let transformY = this.$getTransform(this.ref.header1)
if (Math.abs(transformY) > header1Height / 2) {
this.isFixed = false
this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${-header1Height}px,0)`
} else {
this.isFixed = true
this.ref.header1.style.transform = this.ref.scroller.style.transform = `translate3d(0,${0}px,0)`
}
},
scroll(e) {
if (this.isTop) {
@ -330,7 +359,8 @@ export default {
//overflow: auto;
.scroller {
height: calc(100vh - 10rem);
//transform: translate3d(0, -5rem, 0);
height: calc(100vh - 5rem);
position: relative;
overflow: scroll;
background: black;
@ -349,8 +379,11 @@ export default {
}
header {
//transform: translate3d(0, -5rem, 0);
background: @douyin-bg;
width: 100%;
font-size: 1.5rem;
height: 50px;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;

706
src/pages/home/Attention2.vue
View File

@ -1,73 +1,665 @@
<template>
<div>
<v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite">
<ul>
<li v-for="(item,index) in 50" >{{item.name}}</li>
<li v-for="(item,index) in 5" >{{item.name}}</li>
</ul>
</v-scroll>
<div id="attention">
<header ref="header1">
<span @click="$nav('/country-choose')">双流</span>
<div class="arrow"></div>
</header>
<div class="scroller"
ref="scroller"
@touchstart="start"
@touchmove="move"
@touchend="end"
>
<div ref="wrapper" class="wrapper"
>
<div class="header" ref="header">
<Loading :isFullScreen="false"></Loading>
</div>
<div class="ad" v-if="false">
<div class="title">超值卖场 次日达</div>
<div class="good-ctn">
<div class="left">
<div class="left-title">
<span>限量秒杀</span>
<div>低至0.99元</div>
</div>
<div class="goods">
<div class="good">
<img class="good-img" src="../../assets/img/poster/1.jpg"/>
<div class="name">每日坚果5包</div>
<div class="price">￥0.99</div>
</div>
<div class="good">
<img class="good-img" src="../../assets/img/poster/1.jpg"/>
<div class="name">每日坚果5包</div>
<div class="price">￥0.99</div>
</div>
</div>
</div>
<div class="right">
<div class="goods">
<div class="good">
<div class="notice">
<div class="ad-name">低价疯抢</div>
<div class="ad-desc">统一方便面</div>
</div>
<img class="good-img" src="../../assets/img/poster/1.jpg"/>
</div>
<div class="good">
<div class="notice">
<div class="ad-name">低价疯抢</div>
<div class="ad-desc">统一方便面</div>
</div>
<img class="good-img" src="../../assets/img/poster/1.jpg"/>
</div>
</div>
</div>
</div>
</div>
<div ref="content" class="content">
<div class="left">
<div class="item" v-for="item in left">
<template v-if="item.type === 0">
<div class="wrapper">
<img class="poster" :src="item.src"/>
<img :src="item.author" alt="" class="author">
</div>
<div class="location" v-if="item.address">
<div class="top">
<img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
<div class="name">{{ item.address.name }}</div>
</div>
<div class="bottom">
<div class="type">{{ item.address.type }}</div>
<div class="line"></div>
<div class="other">{{ item.address.number }}人想去</div>
</div>
</div>
</template>
<template v-if="item.type === 1">
<div class="wrapper" style="height: 49vw;overflow:hidden;">
<img class="poster" :src="item.src"/>
</div>
</template>
<template v-if="item.type === 2">
<div class="ranking-list">
<div class="desc">
<div class="top">
<img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
<div class="name">{{ item.desc }}</div>
</div>
<div class="bottom">
基于6亿抖音用户真实数据...
</div>
</div>
<div class="ads">
<div class="ad" v-for="(ad,index) in item.ads">
<div class="left">
<img class="ad-logo" :src="ad.src"/>
</div>
<div class="right">
<div class="rank">TOP{{ index + 1 }}</div>
<div class="name">{{ ad.name }}</div>
</div>
</div>
</div>
</div>
</template>
<template v-if="item.type === 3">
<div class="wrapper">
<img class="poster" :src="item.src"/>
<img :src="item.author" alt="" class="author">
<div class="live">直播中</div>
</div>
</template>
</div>
</div>
<div class="right">
<div class="item" v-for="item in right">
<template v-if="item.type === 0">
<div class="wrapper">
<img class="poster" :src="item.src"/>
<img :src="item.author" alt="" class="author">
</div>
<div class="location" v-if="item.address">
<div class="top">
<img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
<div class="name">{{ item.address.name }}</div>
</div>
<div class="bottom">
<div class="type">{{ item.address.type }}</div>
<div class="line"></div>
<div class="other">{{ item.address.number }}人想去</div>
</div>
</div>
</template>
<template v-if="item.type === 1">
<div class="wrapper" style="height: 49vw;overflow:hidden;">
<img class="poster" :src="item.src"/>
</div>
</template>
<template v-if="item.type === 2">
<div class="ranking-list">
<div class="desc">
<div class="top">
<img class="logo" src="../../assets/img/icon/msg-icon2.png" alt="">
<div class="name">{{ item.desc }}</div>
</div>
<div class="bottom">
基于6亿抖音用户真实数据...
</div>
</div>
<div class="ads">
<div class="ad" v-for="(ad,index) in item.ads">
<div class="left">
<img class="ad-logo" :src="ad.src"/>
</div>
<div class="right">
<div class="rank">TOP{{ index + 1 }}</div>
<div class="name">{{ ad.name }}</div>
</div>
</div>
</div>
</div>
</template>
<template v-if="item.type === 3">
<div class="wrapper">
<img class="poster" :src="item.src"/>
<img :src="item.author" alt="" class="author">
<div class="live">直播中</div>
</div>
</template>
</div>
</div>
</div>
<Loading :isFullScreen="false"></Loading>
</div>
</div>
<Footer v-bind:init-tab="2" style="position: fixed;"/>
</div>
</template>
<script>
import Scroll from './testt';
export default{
data () {
<script>
//TODO 还差个点击，返回后，定位到当前item最高点
import Footer from '../../components/Footer.vue';
import Loading from "../../components/Loading";
export default {
name: "Attention",
components: {
Footer,
Loading
},
data() {
return {
counter : 1, //默认已经显示出15条数据 count等于一是让从16条开始加载
num : 15, // 一次显示多少条
pageStart : 0, // 开始页数
pageEnd : 0, // 结束页数
listdata: [], // 下拉更新数据存放数组
downdata: [] // 上拉更多的数据存放数组
items: [],
height: 0,
width: 0,
footerHeight: 0,
itemType: {
VIDEO: 0,
AD: 1,
RANKING_LIST: 2,
LIVE: 3,
},
isTop: false,
isFixed: true,
startLocationY: 0
}
},
mounted : function(){
this.getList();
created() {
this.height = document.body.clientHeight;
this.width = document.body.clientWidth;
},
computed: {
left() {
return this.items.filter((v, i) => {
return i % 2 === 0
})
},
right() {
return this.items.filter((v, i) => {
return i % 2 !== 0
})
},
bodyHeight() {
return this.$store.state.bodyHeight
},
bodyWidth() {
return this.$store.state.bodyWidth
},
},
mounted() {
for (let i = 1; i < 12; i++) {
let temp = {
src: require(`../../assets/img/poster/${i}.jpg`),
author: require(`../../assets/img/avatar.png`),
}
temp.type = i - 1 > 3 ? 3 : i - 1
if (temp.type === 2) {
temp.desc = '成都市好友聚会美食榜'
temp.ads = [
{
src: require(`../../assets/img/poster/${i}.jpg`),
name: '烧江南烧肉'
},
{
src: require(`../../assets/img/poster/${i}.jpg`),
name: '欧叶无国界料理餐厅'
},
{
src: require(`../../assets/img/poster/${i}.jpg`),
name: '陆派玛歌庄园'
}
]
}
if (i % 2 === 0) {
temp.address = {
name: '大源中央公园',
type: '综合商场',
number: 150
}
}
this.items.push(temp)
}
this.items = this.items.concat(this.items)
// this.$console(this.items)
},
methods: {
getList(){
let vm = this;
// vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => {
// vm.listdata = response.data.slice(0,15);
// }, (response) => {
// console.log('error');
// });
start(e) {
let scroller = this.$refs["scroller"]
let wrapper = this.$refs["wrapper"]
let header1 = this.$refs["header1"]
header1.style.transition = scroller.style.transition = wrapper.style.transition = `none`
this.startLocationY = e.touches[0].pageY
},
onRefresh(done) {
done()
return console.log('onRefresh')
this.getList();
done() // call done
move(e) {
let scroller = this.$refs["scroller"]
let wrapper = this.$refs["wrapper"]
let header1 = this.$refs["header1"]
this.isTop = scroller.scrollTop === 0
// console.log('scrollTop', scroller.scrollTop)
let touchMoveDistance = e.touches[0].pageY - this.startLocationY
console.log('touchMoveDistance', touchMoveDistance)
// let transformY = this.$getTransform(header)
},
onInfinite(done) {
return console.log('onInfinite')
let vm = this;
vm.$http.get('https://api.github.com/repos/typecho-fans/plugins/contents/').then((response) => {
vm.counter++;
vm.pageEnd = vm.num * vm.counter;
vm.pageStart = vm.pageEnd - vm.num;
let arr = response.data;
let i = vm.pageStart;
let end = vm.pageEnd;
for(; i<end; i++){
let obj ={};
obj["name"] = arr[i].name;
vm.downdata.push(obj);
if((i + 1) >= response.data.length){
this.$el.querySelector('.load-more').style.display = 'none';
return;
let headerHeight = 80
let header1Height = 50
if (touchMoveDistance > 0) {
if (this.isTop) {
// wrapper.style.transform = `translate3d(0,${touchMoveDistance > headerHeight ? headerHeight : touchMoveDistance}px,0)`
} else {
if (!this.isFixed){
if (Math.abs(touchMoveDistance) < header1Height) {
scroller.style.marginTop = touchMoveDistance + 'px'
header1.style.top = touchMoveDistance - header1Height + 'px'
} else {
scroller.style.marginTop = header1Height + 'px'
header1.style.top = '0px'
}
}
// this.startLocationY = e.touches[0].pageY
}
} else {
if (this.isFixed){
if (Math.abs(touchMoveDistance) < header1Height) {
scroller.style.marginTop = header1Height + touchMoveDistance + 'px'
header1.style.top = touchMoveDistance + 'px'
} else {
scroller.style.marginTop = '0px'
header1.style.top = -header1Height + 'px'
}
}
done() // call done
}, (response) => {
console.log('error');
});
}
// console.log('isTop', this.isTop)
},
end() {
let header1Height = 50
let scroller = this.$refs["scroller"]
let wrapper = this.$refs["wrapper"]
let header1 = this.$refs["header1"]
header1.style.transition = scroller.style.transition = wrapper.style.transition = `all .3s`
wrapper.style.transform = `translate3d(0,0,0)`
let top = this.$getCss(header1, 'top')
if (Math.abs(top) > header1Height / 2) {
this.isFixed = false
scroller.style.marginTop = '0px'
header1.style.top = header1Height + 'px'
} else {
this.isFixed = true
scroller.style.marginTop = header1Height + 'px'
header1.style.top = '0px'
}
},
scroll(e) {
if (this.isTop) {
e.preventDefault();
}
}
},
components : {
'v-scroll': Scroll
}
}
</script>
</script>
<style scoped lang="less">
@import "../../assets/scss/index";
#attention {
/*background: rgb(22，24，34);*/
/*background: #161822;*/
//抖音原色，感觉很暗
@douyin-bg: #2e3244;
background: @douyin-bg;
color: #b8b9c1;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
//overflow: auto;
.scroller {
height: calc(100vh - 5rem);
margin-top: 5rem;
position: relative;
overflow: scroll;
background: black;
> .wrapper {
position: absolute;
top: -8rem;
left: 0;
width: 100%;
z-index: 2;
> .header {
height: 8rem;
}
}
}
header {
position: absolute;
background: @douyin-bg;
top: 0;
left: 0;
width: 100%;
font-size: 1.5rem;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
@arrow-width: 5px;
.arrow {
position: relative;
top: 3px;
left: 5px;
width: 0;
height: 0;
border-top: @arrow-width solid white;
border-right: @arrow-width solid transparent;
border-bottom: @arrow-width solid transparent;
border-left: @arrow-width solid transparent;
}
}
> .ad {
padding: 10px;
color: white;
.title {
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: bold;
}
.good-ctn {
display: flex;
justify-content: space-between;
.left, .right {
width: calc(50% - 3px);
}
.left {
padding: 10px;
box-sizing: border-box;
border-radius: 5px;
background: linear-gradient(to bottom right, #bd5959 5%, #3f445c 50%);
.left-title {
font-weight: bold;
font-size: 1.7rem;
display: flex;
align-items: center;
margin-bottom: 10px;
div {
background: linear-gradient(to top right, #e37c7c, #bd5959);
padding: 0 4px 2px 4px;
border-radius: 3px;
font-size: 1rem;
font-weight: lighter;
margin-left: 5px;
}
}
.goods {
display: flex;
justify-content: space-between;
.good {
width: calc(50% - 5px);
.good-img {
width: 100%;
height: 50px;
border-radius: 5px;
}
.name {
margin-top: 5px;
}
.price {
font-size: 1rem;
}
}
}
}
.right {
.goods {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.good {
height: calc(50% - 3px);
border-radius: 5px;
box-sizing: border-box;
padding: 10px;
width: 100%;
display: flex;
justify-content: space-between;
background: linear-gradient(to bottom right, #6b267d 10%, #3f445c 50%);
&:nth-child(2) {
background: linear-gradient(to bottom right, #283b53 5%, #3f445c 50%);
}
.notice {
display: flex;
justify-content: center;
flex-direction: column;
.ad-name {
font-weight: bold;
}
.ad-desc {
font-size: 1rem;
color: darkgray;
}
}
.good-img {
width: 50px;
height: 50px;
border-radius: 5px;
}
}
}
}
}
}
.content {
display: flex;
justify-content: space-between;
flex-direction: row;
overflow: auto;
background: black;
box-sizing: border-box;
padding: 0 3px;
> .left, > .right {
width: calc(50% - 1.5px);
}
.item {
width: 100%;
box-sizing: border-box;
margin-bottom: 3px;
.wrapper {
position: relative;
.poster {
width: 100%;
max-height: 50vh;
display: block;
}
.author {
position: absolute;
border-radius: 50%;
height: 3rem;
bottom: 1rem;
left: 1rem;
}
.live {
position: absolute;
padding: .2rem .5rem;
border-radius: .2rem;
top: 1rem;
left: 1rem;
color: white;
background: @primary-btn-color;
}
}
.location {
padding: 8px 10px 10px 10px;
background: @douyin-bg;
.top, .bottom {
font-size: 1.4rem;
display: flex;
align-items: center;
.logo {
height: 12px;
width: 12px;
margin-right: 8px;
}
.name {
color: white;
}
.line {
margin: 0 4px;
width: 1px;
height: .8rem;
background: gray;
}
}
.bottom {
margin-top: 2px;
font-size: 1rem;
}
}
.ranking-list {
padding: 2rem 1rem;
background: @douyin-bg;
.desc {
.top {
margin-bottom: .2rem;
display: flex;
align-items: center;
font-size: 1.4rem;
.logo {
margin-right: .5rem;
height: 1.4rem;
}
.name {
//background: linear-gradient(to bottom right, #bd5959 5%, #3f445c 50%);
}
}
}
.ads {
font-size: 1.2rem;
.ad {
background: @second-btn-color;
display: flex;
margin-top: 1rem;
.left {
margin-right: 1rem;
.ad-logo {
height: 4rem;
width: 4rem;
}
}
.right {
display: flex;
flex-direction: column;
justify-content: center;
.rank {
color: @second-text-color;
margin-bottom: .2rem;
}
}
}
}
}
}
}
}
</style>