save
This commit is contained in:
hhh
parent
aad126623c
commit
ff71c70611
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<from-bottom-dialog
|
||||
page-id="home-index"
|
||||
:page-id="pageId"
|
||||
:modelValue="modelValue"
|
||||
@update:modelValue="e=>$emit('update:modelValue',e)"
|
||||
@cancel="cancel"
|
||||
@ -35,7 +35,8 @@
|
||||
<div class="love" @click="loved(item)">
|
||||
<img v-show="item.isLoved" src="../assets/img/icon/components/like-red-small.png" alt=""
|
||||
class="love-image">
|
||||
<img v-show="!item.isLoved" src="../assets/img/icon/components/like-gray-small.png" alt="" class="love-image">
|
||||
<img v-show="!item.isLoved" src="../assets/img/icon/components/like-gray-small.png" alt=""
|
||||
class="love-image">
|
||||
<span>{{ formatNumber(item.loveNum) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -136,6 +137,10 @@ export default {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
pageId: {
|
||||
type: String,
|
||||
default: 'home-index'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '70vh'
|
||||
|
||||
@ -217,9 +217,12 @@ export default {
|
||||
// eventTester("durationchange", '资源长度改变'); //资源长度改变
|
||||
// eventTester("volumechange", '音量改变'); //音量改变
|
||||
|
||||
console.log('mounted')
|
||||
bus.off('singleClickBroadcast')
|
||||
bus.on('singleClickBroadcast', this.click)
|
||||
},
|
||||
unmounted() {
|
||||
console.log('unmounted')
|
||||
bus.off('singleClickBroadcast', this.click)
|
||||
},
|
||||
methods: {
|
||||
|
||||
@ -10,7 +10,7 @@ import mixin from "./utils/mixin";
|
||||
import VueLazyload from '@jambonn/vue-lazyload'
|
||||
import VConsole from 'vconsole';
|
||||
|
||||
const vConsole = new VConsole();
|
||||
// const vConsole = new VConsole();
|
||||
|
||||
const app = Vue.createApp(App)
|
||||
app.config.globalProperties.$api = {...api}
|
||||
|
||||
@ -12,14 +12,18 @@
|
||||
<div class="tab-ctn">
|
||||
<div class="tabs" ref="tabs">
|
||||
<div class="tab" :class="tabOneClass" @click.stop="change(0)">
|
||||
<span>同城</span>
|
||||
<span>热点</span>
|
||||
<img v-show="index === 0" src="../../assets/img/icon/arrow-up-white.png" class="tab1-img">
|
||||
</div>
|
||||
<div class="tab" :class="{active:index === 1}" @click.stop="change(1)">
|
||||
<span>关注</span>
|
||||
<span>社区</span>
|
||||
<img src="../../assets/img/icon/live.webp" class="tab2-img">
|
||||
</div>
|
||||
<div class="tab" :class="{active:index === 2}" @click.stop="change(2)"><span>推荐</span>
|
||||
<div class="tab" :class="{active:index === 2}" @click.stop="change(2)"><span>关注</span>
|
||||
</div>
|
||||
<div class="tab" :class="{active:index === 3}" @click.stop="change(3)"><span>商城</span>
|
||||
</div>
|
||||
<div class="tab" :class="{active:index === 4}" @click.stop="change(4)"><span>推荐</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="indicator" ref="indicator"></div>
|
||||
@ -123,7 +127,6 @@ export default {
|
||||
this.initTabs()
|
||||
bus.on(this.name + '-moveX', this.move)
|
||||
bus.on(this.name + '-moveY', e => {
|
||||
// console.log('moveY', e)
|
||||
this.moveY = e
|
||||
})
|
||||
bus.on(this.name + '-end', this.end)
|
||||
@ -162,7 +165,7 @@ export default {
|
||||
move(e) {
|
||||
this.$setCss(this.indicatorRef, 'transition-duration', `0ms`)
|
||||
this.$setCss(this.indicatorRef, 'left',
|
||||
this.lefts[this.index] -
|
||||
this.lefts[this.index] +
|
||||
e / (this.$store.state.bodyWidth / this.indicatorSpace) + 'px')
|
||||
},
|
||||
end(index) {
|
||||
@ -180,11 +183,11 @@ export default {
|
||||
<style scoped lang="less">
|
||||
@import "@/assets/less/index";
|
||||
|
||||
@height: 6rem;
|
||||
@height: 60rem;
|
||||
|
||||
.indicator-home {
|
||||
position: fixed;
|
||||
font-size: 1.6rem;
|
||||
font-size: 16rem;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
@ -206,8 +209,8 @@ export default {
|
||||
|
||||
.loading {
|
||||
opacity: 0;
|
||||
top: 1.3rem;
|
||||
right: 1.5rem;
|
||||
top: 13rem;
|
||||
right: 15rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@ -218,13 +221,13 @@ export default {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 1.5rem;
|
||||
padding: 0 15rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.tab-ctn {
|
||||
width: 45%;
|
||||
width: 80%;
|
||||
position: relative;
|
||||
|
||||
.tabs {
|
||||
@ -242,16 +245,16 @@ export default {
|
||||
@width: 1rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
margin-left: .4rem;
|
||||
margin-left: 4rem;
|
||||
transition: all .3s;
|
||||
margin-top: .7rem;
|
||||
margin-top: 7rem;
|
||||
}
|
||||
|
||||
.tab2-img {
|
||||
position: absolute;
|
||||
height: 1.5rem;
|
||||
left: 2.4rem;
|
||||
top: -.5rem;
|
||||
height: 15rem;
|
||||
left: 24rem;
|
||||
top: -5rem;
|
||||
}
|
||||
|
||||
&.open {
|
||||
@ -266,38 +269,38 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.indicator {
|
||||
//transition: left .3s;
|
||||
position: absolute;
|
||||
bottom: -0.8rem;
|
||||
height: .2rem;
|
||||
width: 2rem;
|
||||
bottom: -8rem;
|
||||
height: 2rem;
|
||||
width: 20rem;
|
||||
//width: calc(100% / 5);
|
||||
background: #fff;
|
||||
border-radius: .5rem;
|
||||
border-radius: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 2rem;
|
||||
width: 20rem;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-type {
|
||||
@height: 10rem;
|
||||
@height: 100rem;
|
||||
position: absolute;
|
||||
height: @height;
|
||||
//padding-top: @height;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
padding-left: 10rem;
|
||||
padding-right: 10rem;
|
||||
padding-bottom: 10rem;
|
||||
width: 100%;
|
||||
background: @main-bg;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
box-sizing: border-box;
|
||||
font-size: 1.2rem;
|
||||
font-size: 12rem;
|
||||
top: -@height;
|
||||
transition: all .3s;
|
||||
opacity: 0;
|
||||
@ -309,13 +312,13 @@ export default {
|
||||
|
||||
.l-button {
|
||||
flex: 1;
|
||||
margin: 0 .3rem;
|
||||
height: 2.8rem;
|
||||
margin: 0 3rem;
|
||||
height: 28rem;
|
||||
background: rgb(33, 36, 45);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 2rem;
|
||||
border-radius: 20rem;
|
||||
color: rgb(157, 161, 170);
|
||||
transition: all .3s;
|
||||
|
||||
@ -325,10 +328,10 @@ export default {
|
||||
}
|
||||
|
||||
img {
|
||||
@width: .9rem;
|
||||
@width: 9rem;
|
||||
width: @width;
|
||||
height: @width;
|
||||
margin-left: .8rem;
|
||||
margin-left: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<SlideHorizontal
|
||||
name="main"
|
||||
v-model:index="baseIndex"
|
||||
style="height: calc(100% - 5rem);"
|
||||
style="height: calc(100% - 50rem);"
|
||||
>
|
||||
<div class="slide-item">
|
||||
<div class="nav-one" :class="{close:closeOne}">
|
||||
@ -171,7 +171,7 @@ export default {
|
||||
<div class="slide-item" data-index={itemIndex}>
|
||||
<BVideo
|
||||
isPlay={play}
|
||||
video={item}
|
||||
item={item}
|
||||
prefix={prefix}
|
||||
index={itemIndex}
|
||||
onShowComments={e => this.isCommenting = true}
|
||||
@ -293,7 +293,7 @@ export default {
|
||||
}
|
||||
|
||||
.nav-one {
|
||||
height: 14rem;
|
||||
height: 140rem;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(to right, rgb(36, 34, 84), rgb(7, 5, 16));
|
||||
transition: all .3s;
|
||||
@ -303,7 +303,7 @@ export default {
|
||||
justify-content: space-between;
|
||||
|
||||
.nav-item {
|
||||
@width: 3.5rem;
|
||||
@width: 35rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
@ -311,20 +311,20 @@ export default {
|
||||
img {
|
||||
width: @width;
|
||||
height: @width;
|
||||
margin-bottom: .5rem;
|
||||
margin-bottom: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.close {
|
||||
margin-top: -14rem;
|
||||
margin-top: -140rem;
|
||||
}
|
||||
}
|
||||
|
||||
@space-width: 1.5rem;
|
||||
@icon-width: 5.2rem;
|
||||
@space-width: 15rem;
|
||||
@icon-width: 52rem;
|
||||
|
||||
.nav-two {
|
||||
height: 18rem;
|
||||
height: 180rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
@ -337,7 +337,7 @@ export default {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 15rem;
|
||||
|
||||
.right {
|
||||
color: gray;
|
||||
@ -346,9 +346,9 @@ export default {
|
||||
}
|
||||
|
||||
img {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
margin-left: .4rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
margin-left: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -361,7 +361,7 @@ export default {
|
||||
width: @icon-width;
|
||||
position: relative;
|
||||
margin-right: @space-width;
|
||||
font-size: 1rem;
|
||||
font-size: 10rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -373,7 +373,7 @@ export default {
|
||||
}
|
||||
|
||||
span {
|
||||
margin-top: .8rem;
|
||||
margin-top: 8rem;
|
||||
text-align: center;
|
||||
width: @icon-width;
|
||||
white-space: nowrap;
|
||||
@ -383,17 +383,17 @@ export default {
|
||||
|
||||
.tag {
|
||||
background: rgb(239, 46, 137);
|
||||
border-radius: .2rem;
|
||||
padding: 0 .2rem;
|
||||
bottom: 1.8rem;
|
||||
border-radius: 2rem;
|
||||
padding: 0 2rem;
|
||||
bottom: 18rem;
|
||||
position: absolute;
|
||||
font-size: 1rem;
|
||||
font-size: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.close {
|
||||
margin-top: -18rem;
|
||||
margin-top: -180rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -65,6 +65,7 @@ export default {
|
||||
|
||||
if (this.next) {
|
||||
bus.emit(this.name + '-moveX', this.moveX)
|
||||
|
||||
this.$stopPropagation(e)
|
||||
this.$setCss(this.wrapper, 'transform',
|
||||
`translate3d(${this.getDistance()
|
||||
|
||||
@ -12,13 +12,17 @@ const props = defineProps({
|
||||
return 0
|
||||
}
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['update:index'])
|
||||
|
||||
const judgeValue = 20
|
||||
const wrapperEl = ref(null)
|
||||
const state = reactive({
|
||||
name: 'SlideHorizontal',
|
||||
name: props.name,
|
||||
localIndex: props.index,
|
||||
needCheck: true,
|
||||
next: false,
|
||||
@ -39,7 +43,7 @@ watch(
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
slideInit(wrapperEl.value,state,SlideType.HORIZONTAL)
|
||||
slideInit(wrapperEl.value, state, SlideType.HORIZONTAL)
|
||||
})
|
||||
|
||||
function touchStart(e) {
|
||||
@ -47,7 +51,7 @@ function touchStart(e) {
|
||||
}
|
||||
|
||||
function touchMove(e) {
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext,null, SlideType.HORIZONTAL)
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.HORIZONTAL)
|
||||
}
|
||||
|
||||
function touchEnd(e) {
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
<script setup lang="jsx">
|
||||
import {onMounted, reactive, ref, watch, createApp} from "vue";
|
||||
import {onMounted, reactive, ref, watch, createApp, computed} from "vue";
|
||||
import GM from '../../utils'
|
||||
import {getSlideDistance, slideInit, slideReset, slideTouchEnd, slideTouchMove, slideTouchStart} from "./common";
|
||||
import {SlideType} from "../../utils/const_var";
|
||||
import SlideItem from './SlideItem'
|
||||
import bus from "../../utils/bus";
|
||||
import {useStore} from 'vuex'
|
||||
|
||||
const props = defineProps({
|
||||
index: {
|
||||
@ -34,15 +36,18 @@ const props = defineProps({
|
||||
type: Number,
|
||||
default: () => 5
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: () => ''
|
||||
},
|
||||
})
|
||||
const emit = defineEmits(['update:index'])
|
||||
|
||||
const appInsMap = new Map()
|
||||
const judgeValue = 20
|
||||
const slideItemClassName = 'slide-item2'
|
||||
const wrapperEl = ref(null)
|
||||
const state = reactive({
|
||||
name: 'SlideVerticalInfinite',
|
||||
name: props.name,
|
||||
localIndex: props.index,
|
||||
needCheck: true,
|
||||
next: false,
|
||||
@ -50,6 +55,9 @@ const state = reactive({
|
||||
move: {x: 0, y: 0},
|
||||
wrapper: {width: 0, height: 0, childrenLength: 0}
|
||||
})
|
||||
const store = useStore()
|
||||
const homeRefresh = computed(() => store.state.homeRefresh)
|
||||
const judgeValue = computed(() => store.state.judgeValue)
|
||||
|
||||
watch(
|
||||
() => props.index,
|
||||
@ -80,8 +88,6 @@ function insertContent(list = props.list) {
|
||||
start = end - 5
|
||||
}
|
||||
if (start < 0) start = 0
|
||||
console.log('start', start)
|
||||
console.log('end', end)
|
||||
list.slice(start, end).map(
|
||||
(item, index) => {
|
||||
//自动播放，当前条（可能是0，可能是其他），试了下用jq来找元素，然后trigger play事件，要慢点样
|
||||
@ -125,10 +131,15 @@ function touchStart(e) {
|
||||
}
|
||||
|
||||
function touchMove(e) {
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue, canNext, null, SlideType.VERTICAL)
|
||||
slideTouchMove(e, wrapperEl.value, state, judgeValue.value, canNext, null, SlideType.VERTICAL)
|
||||
}
|
||||
|
||||
function touchEnd(e) {
|
||||
let isNext = state.move.y < 0
|
||||
if (state.localIndex === 0 && !isNext && state.move.y > (homeRefresh.value + judgeValue.value)) {
|
||||
console.log('loading')
|
||||
// bus.emit(props.prefix + '-loading')
|
||||
}
|
||||
slideTouchEnd(e, state, canNext, (isNext) => {
|
||||
if (isNext) {
|
||||
let addItemIndex = state.localIndex + 2
|
||||
|
||||
@ -42,11 +42,19 @@ export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type
|
||||
|
||||
let isNext = type === SlideType.HORIZONTAL ? state.move.x < 0 : state.move.y < 0
|
||||
|
||||
let canSlideRes = canSlide(state, judgeValue, type)
|
||||
|
||||
//当
|
||||
if (canSlideRes && state.localIndex === 0 && !isNext && type === SlideType.VERTICAL) {
|
||||
bus.emit(state.name + '-moveY', state.move.y)
|
||||
}
|
||||
if (!canNextCb?.(isNext, e)) return
|
||||
|
||||
if (canSlide(state, judgeValue, type)) {
|
||||
if (canSlideRes) {
|
||||
nextCb?.()
|
||||
bus.emit(state.name + '-moveX', state.move.x)
|
||||
if (type === SlideType.HORIZONTAL) {
|
||||
bus.emit(state.name + '-moveX', state.move.x)
|
||||
}
|
||||
Utils.$stopPropagation(e)
|
||||
let t = getSlideDistance(state, type) + (isNext ? judgeValue : -judgeValue)
|
||||
let dx1 = 0
|
||||
@ -82,9 +90,6 @@ export function slideTouchEnd(e, state, canNextCb, nextCb, notNextCb, type = Sli
|
||||
} else {
|
||||
state.localIndex--
|
||||
}
|
||||
|
||||
|
||||
|
||||
return nextCb?.(isNext)
|
||||
}
|
||||
}
|
||||
@ -97,8 +102,10 @@ export function slideReset(el, state, type, emit) {
|
||||
let dx1 = 0
|
||||
let dx2 = 0
|
||||
if (type === SlideType.HORIZONTAL) {
|
||||
bus.emit(state.name + '-end', state.localIndex)
|
||||
dx1 = t
|
||||
} else {
|
||||
bus.emit(state.name + '-end',)
|
||||
dx2 = t
|
||||
}
|
||||
Utils.$setCss(el, 'transform', `translate3d(${dx1}px, ${dx2}px, 0)`)
|
||||
@ -106,7 +113,6 @@ export function slideReset(el, state, type, emit) {
|
||||
state.next = false
|
||||
state.needCheck = true
|
||||
emit?.('update:index', state.localIndex)
|
||||
bus.emit(state.name + '-end', state.localIndex)
|
||||
}
|
||||
|
||||
export function getSlideDistance(state, type = SlideType.HORIZONTAL) {
|
||||
|
||||
@ -1,11 +1,16 @@
|
||||
<template>
|
||||
<div class="test-slide-wrapper" id="slideHook" v-love="'slideHook'">
|
||||
<H v-model:index="state.baseIndex">
|
||||
<SlideItem class=" gray">
|
||||
<H class="h" v-model:index="state.navIndex">
|
||||
<SlideItem class=" gray">
|
||||
<div class="big">找红包</div>
|
||||
</SlideItem>
|
||||
<SlideItem>
|
||||
<IndicatorHome
|
||||
v-hide="state.isUp"
|
||||
:loading="state.loading"
|
||||
name="main"
|
||||
v-model:index="state.navIndex"
|
||||
/>
|
||||
<H class="h"
|
||||
name="main"
|
||||
v-model:index="state.navIndex">
|
||||
<SlideItem class=" gray">
|
||||
<div class="big">热点</div>
|
||||
</SlideItem>
|
||||
@ -18,8 +23,9 @@
|
||||
<SlideItem class=" gray">
|
||||
<div class="big">商城</div>
|
||||
</SlideItem>
|
||||
<SlideItem class="">
|
||||
<SlideItem>
|
||||
<VInfinite
|
||||
name="main"
|
||||
v-model:index="state.itemIndex"
|
||||
:render="render"
|
||||
:list="state.recommendVideos"
|
||||
@ -48,6 +54,7 @@
|
||||
</SlideItem>
|
||||
</H>
|
||||
</div>
|
||||
<Comment page-id="slideHook" v-model="state.isCommenting"/>
|
||||
</template>
|
||||
|
||||
<script setup lang="jsx">
|
||||
@ -56,6 +63,8 @@ import VInfinite from './VInfinite.vue'
|
||||
import SlideItem from './SlideItem'
|
||||
import SlideImgs from "../../components/slide/SlideAlbum";
|
||||
import BVideo from "../../components/slide/BVideo";
|
||||
import Comment from "../../components/Comment";
|
||||
import IndicatorHome from "../slide/IndicatorHome";
|
||||
|
||||
import resource from "../../assets/data/resource.js";
|
||||
import {onMounted, onUnmounted, reactive} from "vue";
|
||||
@ -64,7 +73,7 @@ import {useNav} from "../../utils/hooks/useNav";
|
||||
|
||||
const nav = useNav()
|
||||
|
||||
const videos = resource.videos.slice(0,5).map(v => {
|
||||
const videos = resource.videos.slice(0, 6).map(v => {
|
||||
v.type = 'recommend-video'
|
||||
return v
|
||||
})
|
||||
@ -72,7 +81,7 @@ const videos = resource.videos.slice(0,5).map(v => {
|
||||
|
||||
const state = reactive({
|
||||
baseIndex: 0,
|
||||
navIndex: 5,
|
||||
navIndex: 4,
|
||||
itemIndex: 0,
|
||||
recommendVideos: [
|
||||
// {
|
||||
@ -89,6 +98,8 @@ const state = reactive({
|
||||
isCommenting: false,
|
||||
isSharing: false,
|
||||
canMove: true,
|
||||
loading: false,
|
||||
isUp: false,
|
||||
|
||||
shareType: -1,
|
||||
|
||||
@ -118,9 +129,7 @@ onMounted(() => {
|
||||
state.recommendVideos[itemIndex] = val.item
|
||||
}
|
||||
})
|
||||
bus.on('nav', path => {
|
||||
nav(path)
|
||||
})
|
||||
bus.on('nav', path => nav(path))
|
||||
})
|
||||
onUnmounted(() => {
|
||||
bus.offAll()
|
||||
@ -136,7 +145,7 @@ function render(item, itemIndex, play, position) {
|
||||
}
|
||||
if (item.type === 'recommend-video') {
|
||||
node = <BVideo
|
||||
isPlay={play}
|
||||
isPlay={false}
|
||||
item={item}
|
||||
position={{...position, itemIndex}}
|
||||
onShowComments={e => state.isCommenting = true}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user