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-23 21:02:51 +08:00
parent 39883a1110
commit 3d0628cb33
4 changed files with 66 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/slide/SlideColumnList.vue
View File

@ -35,6 +35,10 @@ export default {
type: Number,
default: () => 5
},
activeIndex: {
type: Number,
default: () => 0
},
},
data() {
return {
@ -65,31 +69,27 @@ export default {
handler(newVal, oldVal) {
if (!this.virtual) return
if (oldVal.length === 0) {
this.list.slice(0, (this.defaultVirtualItemTotal + 1) / 2).map((item, index) => {
this.slideList.appendChild(this.getInsEl(item, index))
})
} else {
// console.log(this.currentSlideItemIndex)
let endLength = newVal.length
if (newVal.length - oldVal.length > (this.defaultVirtualItemTotal - 1) / 2) {
endLength = oldVal.length + (this.defaultVirtualItemTotal - 1) / 2
let startIndex = 0
if (this.currentSlideItemIndex >= this.defaultVirtualItemTotal) {
startIndex = this.currentSlideItemIndex - (this.defaultVirtualItemTotal + 1) / 2
}
this.list.slice(startIndex, startIndex + 5).map(
(item, index) => {
this.slideList.appendChild(this.getInsEl(item, startIndex + index))
})
let that = this
// newVal.slice(oldVal.length, endLength).map((item, index) => {
// this.slideList.appendChild(this.getInsEl(item, oldVal.length + index))
// let appIns = this.appInsMap.get($("#base-slide-list .base-slide-item:first").data('index'))
// if (appIns) {
// appIns.unmount()
// }
// // $("#base-slide-list .base-slide-item:first").remove()
// $(".base-slide-item").each(function () {
// $(this).css('top',
// ((endLength - oldVal.length) > 1 ?
// (that.currentSlideItemIndex - 2) :
// (that.currentSlideItemIndex - 3)) *
// that.wrapperHeight)
// })
// $(".video-slide-item").each(function () {
// $(this).css('top',
// ((that.currentSlideItemIndex) > 1 ? (that.currentSlideItemIndex - 2) : (that.currentSlideItemIndex - 3))
// *
// that.wrapperHeight)
// })
} else {
let endLength = oldVal.length + 3
newVal.slice(oldVal.length, endLength).map((item, index) => {
this.slideList.appendChild(this.getInsEl(item, oldVal.length + index))
})
this.checkChildren()
}
},
deep: true
@ -103,8 +103,8 @@ export default {
},
mounted: async function () {
if (this.virtual) {
this.slideList = this.$refs.slideList
this.list.slice(0, (this.defaultVirtualItemTotal + 1) / 2).map((item, index) => {
this.currentSlideItemIndex = this.activeIndex
this.list.slice(this.currentSlideItemIndex, (this.defaultVirtualItemTotal + 1) / 2).map((item, index) => {
this.slideList.appendChild(this.getInsEl(item, index))
})
}
@ -142,6 +142,29 @@ export default {
this.startLocationX = e.touches[0].pageX
this.startLocationY = e.touches[0].pageY
this.startTime = Date.now()
if (this.virtual) {
let that = this
let items = $(".video-slide-item")
if (items.length > this.defaultVirtualItemTotal) {
let middle = (this.defaultVirtualItemTotal - 1) / 2
let removeNum = 0
items.each(function (index) {
if ($(this).data('index') === that.currentSlideItemIndex) {
console.log('start-index', index)
if (index !== middle) {
removeNum = index - middle
}
}
})
items.each(function (index) {
$(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
})
for (let i = 0; i < removeNum; i++) {
$(items[i]).remove()
}
}
}
},
touchMove(e) {
this.moveXDistance = e.touches[0].pageX - this.startLocationX
@ -205,9 +228,12 @@ export default {
if (this.isDrawDown) {
let addItemIndex = this.currentSlideItemIndex + 2
if (this.slideItems.length < this.defaultVirtualItemTotal) {
this.slideList.appendChild(this.getInsEl(this.list[addItemIndex], addItemIndex))
let res = $(`#base-slide-list .video-slide-item[data-index=${addItemIndex}]`)
if (res.length === 0) {
this.slideList.appendChild(this.getInsEl(this.list[addItemIndex], addItemIndex))
}
}
if (this.slideItems.length >= this.defaultVirtualItemTotal
if (this.slideItems.length === this.defaultVirtualItemTotal
&& this.currentSlideItemIndex >= (this.defaultVirtualItemTotal + 1) / 2
&& this.currentSlideItemIndex <= this.list.length - 3
) {
@ -222,6 +248,12 @@ export default {
})
}
}
if (this.slideItems.length > this.defaultVirtualItemTotal) {
this.appInsMap.get($("#base-slide-list .video-slide-item:first").data('index')).unmount()
$(".video-slide-item").each(function () {
$(this).css('top', (that.currentSlideItemIndex - 2) * that.wrapperHeight)
})
}
} else {
if (this.currentSlideItemIndex > 1 && this.currentSlideItemIndex <= this.list.length - 4) {
let addItemIndex = this.currentSlideItemIndex - 2
@ -291,7 +323,6 @@ export default {
height: 100%;
width: 100%;
position: relative;
}
}
</style>

8
src/config/index.js
View File

@ -1,6 +1,6 @@
export default {
baseUrl: 'http://192.168.0.105//index.php/v1',
filePreview:'http://192.168.0.105/static/uploads/',
// baseUrl: 'http://192.168.10.164//index.php/v1',
// filePreview:'http://192.168.10.164/static/uploads/'
// baseUrl: 'http://192.168.0.105//index.php/v1',
// filePreview:'http://192.168.0.105/static/uploads/',
baseUrl: 'http://192.168.10.164//index.php/v1',
filePreview:'http://192.168.10.164/static/uploads/'
}

8
src/pages/home/Index.vue
View File

@ -90,14 +90,14 @@
</SlideList>
</SlideItem>
<SlideItem>
<SlideColumnList
<SlideList
direction="column"
ref="slideList"
v-model:active-index="videoActiveIndex"
:virtual="true"
:virtual="false"
:total="total"
@slide="slide">
<SlideItem :style="itemTop" v-for="(item,index) of videos">
<SlideItem :style="itemTop" v-for="(item,index) of videos" :key="index">
<Video
:disabled="videoActiveIndex !== addCount + index"
v-model:video="videos[index]"
@ -106,7 +106,7 @@
@goUserInfo="baseActiveIndex = 1"
></Video>
</SlideItem>
</SlideColumnList>
</SlideList>
</SlideItem>
</SlideList>
<Footer v-bind:init-tab="1"/>

1
src/pages/home/Index2.vue
View File

@ -319,7 +319,6 @@ export default {
},
watch: {
videoActiveIndex(newVal) {
console.log(newVal)
$(".video-slide-item").each(function () {
let video = $(this).find('video')
if ($(this).data('index') === newVal) {