From 6057c984064d272cbc03749a5778c68297dd1d7a Mon Sep 17 00:00:00 2001 From: zyronon Date: Tue, 29 Jun 2021 18:00:48 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84me=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 1 + src/main.js | 122 +------------- src/pages/home/Me.vue | 298 +++++++++++++++++++++++++---------- src/pages/home/SlideList.vue | 9 +- src/router/index.js | 30 ++++ src/store/index.js | 24 +++ src/utils/global-methods.js | 64 ++++++++ 7 files changed, 344 insertions(+), 204 deletions(-) create mode 100644 src/router/index.js create mode 100644 src/store/index.js create mode 100644 src/utils/global-methods.js diff --git a/src/App.vue b/src/App.vue index 8f660ed..b8475e9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -57,4 +57,5 @@ export default { } + diff --git a/src/main.js b/src/main.js index 72fc8f4..b01be86 100644 --- a/src/main.js +++ b/src/main.js @@ -1,129 +1,19 @@ import * as Vue from 'vue' -import * as VueRouter from 'vue-router' -import * as Vuex from 'vuex' import App from './App.vue' import mitt from 'mitt' import './assets/scss/index.scss' -import Index from './pages/home/Index.vue' -import Attention from './pages/home/Attention.vue' -import Message from './pages/home/Message.vue' -import Me from './pages/home/Me.vue' -import Music from './components/common/Music.vue' -import countryChoose from "./pages/login/countryChoose.vue" -import MyCard from "./pages/me/MyCard.vue" - import BaseHeader from "./components/BaseHeader.vue" -import MyCollect from "./pages/me/MyCollect.vue"; import BaseSlideList from "./components/BaseSlideList.vue"; import BaseSlideItem from "./components/BaseSlideItem.vue"; -import Me2 from "./pages/home/Me2"; - -// 我们后面再讨论嵌套路由。 -const routes = [ - // {path: '', component: Music}, - {path: '/', component: Index}, - {path: '/home', component: Index}, - {path: '/attention', component: Attention}, - {path: '/message', component: Message}, - {path: '/me', component: Me}, - {path: '/me2', component: Me2}, - {path: '/music', component: Music}, - {path: '/countryChoose', component: countryChoose}, - {path: '/MyCard', component: MyCard}, - {path: '/MyCollect', component: MyCollect},] - -const router = VueRouter.createRouter({ - history: VueRouter.createWebHashHistory(), - routes, // `routes: routes` 的缩写 -}) - -const store = Vuex.createStore({ - state: { - pageAnim: 'none', - playDuration: 60, - currentVideoId: null, - bodyHeight: document.body.clientHeight, - bodyWidth: document.body.clientWidth - }, - mutations: { - setPageAnim(state, states) { - state.pageAnim = states - }, - setPlayDuration(state, v) { - state.playDuration = v - }, - setCurrentVideoId(state, v) { - state.currentVideoId = v - }, - } -}) +import router from "./router"; +import store from "./store"; +import globalMethods from './utils/global-methods' -const myMixin = { +const mixin = { methods: { - $stopPropagation(e) { - e.stopImmediatePropagation() - e.stopPropagation() - e.preventDefault() - }, - $getCss(curEle, attr) { - let val = null, reg = null - if ("getComputedStyle" in window) { - val = window.getComputedStyle(curEle, null)[attr] - } else { //ie6~8不支持上面属性 - //不兼容 - if (attr === "opacity") { - val = curEle.currentStyle["filter"] //'alpha(opacity=12,345)' - reg = /^alphaopacity=(\d+(?:\.\d+)?)opacity=(\d+(?:\.\d+)?)$/i - val = reg.test(val) ? reg.exec(val)[1] / 100 : 1 - } else { - val = curEle.currentStyle[attr] - } - } - // reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i - // return reg.test(val) ? parseFloat(val) : val - return parseFloat(val) - }, - $setCss(el, key, value) { - if (key === 'transform') { - //直接设置不生效 - el.style.webkitTransform = el.style.MsTransform = el.style.msTransform = el.style.MozTransform = el.style.OTransform = el.style.transform = value; - } else { - el.style[key] = value - } - }, - $nav(path, query = {}) { - this.$router.push({path, query}) - }, - $clone(v) { - return JSON.parse(JSON.stringify(v)) - }, - $console(v) { - return console.log(JSON.stringify(v, null, 4)) - }, - $duration(v) { - let m = Math.floor(v / 60) - // let s = v % 60 - let s = Math.round(v % 60) - let str = '' - if (m === 0) { - str = '00' - } else if (m > 0 && m < 10) { - str = '0' + m - } else { - str = m - } - str += ':' - if (s === 0) { - str += '00' - } else if (s > 0 && s < 10) { - str += '0' + s - } else { - str += s - } - return str - } + ...globalMethods } } const app = Vue.createApp(App) @@ -132,7 +22,7 @@ app.provide('mitt', mitt()) app.component('BaseHeader', BaseHeader) app.component('BaseSlideList', BaseSlideList) app.component('BaseSlideItem', BaseSlideItem) -app.mixin(myMixin) +app.mixin(mixin) app.use(router) app.use(store) app.mount('#app') diff --git a/src/pages/home/Me.vue b/src/pages/home/Me.vue index 101d5e9..fecb977 100644 --- a/src/pages/home/Me.vue +++ b/src/pages/home/Me.vue @@ -3,9 +3,10 @@ - +
@@ -73,6 +74,7 @@ :show-indicator="true" :indicator-fixed="indicatorFixed" indicator-type="me" + @end="end" v-model:active-index="contentIndex">
@@ -98,80 +100,111 @@
- -
    -
  • - - 个人名片 -
    • -
  • - - 我的收藏 -
    • -
    -
  • - - 钱包 -
    • -
  • - - 订单 -
    • -
  • -
    - - 服务 -
    -
    -
    • -
    -
  • - - 购物助手 + + +
      +
    • + + 我的订单
      • -
    • - - 生活服务订单 +
    • + + 钱包
      • -
    • - - DOU+ 上热门 +
      + +
    • + + 我的收藏
      • -
    • - - 彩铃服务 +
    • + + 观看历史
      • -
    • - - 免流量看抖音 +
    • + + 我的动态 +
      • +
    • + + 创作者服务中心
      • -
    • - -
    - -
  • - - 小程序 -
    • -
  • - - 卡卷 -
    • -
    +
    -
  • - - 未成年保护工具 -
    • +
  • + + 小程序 +
    • +
  • + + 抖音公益 +
    • +
  • + + 未成年保护工具 +
    • +
  • + + 我的客服 +
    • +
  • + + 设置 +
    • +
+
+
生活服务
+
+
+ + 卡券 +
+
+ + 免流量 +
-
+
+ + 我的收藏 +
+
+
拓展功能
+
+
+ + 我的二维码 +
+
+ + 我的缓存 +
+
+ + 上热门 +
+
+ + 小店随心推 +
+
+ + 投教园地 +
+
+
+ -
  • - - 设置 -
    • - +
    +
    + + 更多功能 +
    +
    + 返回 +
    +
    @@ -184,7 +217,7 @@ import Footer from "../../components/Footer"; export default { name: "Me", - components: {SlideList, SlideItem, Posters,Footer}, + components: {SlideList, SlideItem, Posters, Footer}, data() { return { serviceEl: {}, @@ -198,17 +231,29 @@ export default { refs: { header: null, headerHeight: 0, - } + }, + isMoreFunction: false, + } }, watch: { contentIndex(newVal, oldVal) { this.changeIndex(newVal, oldVal) + }, + baseActiveIndex(newVal, oldVal) { + if (newVal === 1) { + console.log('right') + } } }, computed: { bodyHeight() { return this.$store.state.bodyHeight + }, + contentStyle(){ + return{ + opacity:1 + } } }, mounted() { @@ -219,6 +264,18 @@ export default { }) }, methods: { + click(e) { + if (this.baseActiveIndex === 0) return + if (this.baseActiveIndex === 1) { + this.baseActiveIndex = 0 + this.$stopPropagation(e) + } + }, + move(e) { + if (e.x.isDrawRight) { + console.log('isDrawRight') + } + }, scroll() { let top = this.tabContents[this.contentIndex].getBoundingClientRect().top this.indicatorFixed = top < this.indicatorHeight; @@ -259,6 +316,7 @@ export default { }, first(e) { if (this.baseActiveIndex !== 0) return + if (this.refs.header.getBoundingClientRect().top !== 0) return this.refs.header.style.transition = 'all 0s' this.refs.header.style.height = this.refs.headerHeight + (e / 3) + 'px' }, @@ -274,6 +332,18 @@ export default { diff --git a/src/pages/home/SlideList.vue b/src/pages/home/SlideList.vue index e6e29f6..601fcfc 100644 --- a/src/pages/home/SlideList.vue +++ b/src/pages/home/SlideList.vue @@ -231,10 +231,17 @@ export default { this.homeLoadingMoveYDistance = this.moveYDistance } + //me页面，需要获取向下滑动的时候 if (!this.isDrawDown) { this.$attrs['onFirst'] && this.$emit('first', this.moveYDistance) } + this.$attrs['onMove'] && this.$emit('move', { + x: {distance: this.moveXDistance, isDrawRight: this.isDrawRight}, + y: {distance: this.moveYDistance, isDrawDown: this.isDrawDown}, + }) + + if (this.direction === 'row') { if (this.isCanRightWiping) { // //禁止在index=0页面的时候，向左划 @@ -250,7 +257,7 @@ export default { } } else { if (this.isCanDownWiping) { - if (this.currentSlideItemIndex === 0 && !this.isDrawDown)return; //在第一个item，并且想往下划。 + if (this.currentSlideItemIndex === 0 && !this.isDrawDown) return; //在第一个item，并且想往下划。 if (this.virtual) { if (this.currentSlideItemIndex === this.total - 1 && this.isDrawDown) return diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..730855a --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,30 @@ +import * as VueRouter from "vue-router"; + +import Index from "../pages/home/Index"; +import Attention from "../pages/home/Attention"; +import Message from "../pages/home/Message"; +import Me from "../pages/home/Me"; +import Me2 from "../pages/home/Me2"; +import Music from "../components/common/Music"; +import countryChoose from "../pages/login/countryChoose"; +import MyCard from "../pages/me/MyCard"; +import MyCollect from "../pages/me/MyCollect"; + +const routes = [ + // {path: '', component: Music}, + {path: '/', component: Index}, + {path: '/home', component: Index}, + {path: '/attention', component: Attention}, + {path: '/message', component: Message}, + {path: '/me', component: Me}, + {path: '/me2', component: Me2}, + {path: '/music', component: Music}, + {path: '/countryChoose', component: countryChoose}, + {path: '/MyCard', component: MyCard}, + {path: '/MyCollect', component: MyCollect}, +] + +export default VueRouter.createRouter({ + history: VueRouter.createWebHashHistory(), + routes, // `routes: routes` 的缩写 +}) \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000..924cd51 --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,24 @@ +import * as Vuex from "vuex"; + +const store = Vuex.createStore({ + state: { + pageAnim: 'none', + playDuration: 60, + currentVideoId: null, + bodyHeight: document.body.clientHeight, + bodyWidth: document.body.clientWidth + }, + mutations: { + setPageAnim(state, states) { + state.pageAnim = states + }, + setPlayDuration(state, v) { + state.playDuration = v + }, + setCurrentVideoId(state, v) { + state.currentVideoId = v + }, + } +}) + +export default store \ No newline at end of file diff --git a/src/utils/global-methods.js b/src/utils/global-methods.js new file mode 100644 index 0000000..0c27729 --- /dev/null +++ b/src/utils/global-methods.js @@ -0,0 +1,64 @@ +export default { + $stopPropagation(e) { + e.stopImmediatePropagation() + e.stopPropagation() + e.preventDefault() + }, + $getCss(curEle, attr) { + let val = null, reg = null + if ("getComputedStyle" in window) { + val = window.getComputedStyle(curEle, null)[attr] + } else { //ie6~8不支持上面属性 + //不兼容 + if (attr === "opacity") { + val = curEle.currentStyle["filter"] //'alpha(opacity=12,345)' + reg = /^alphaopacity=(\d+(?:\.\d+)?)opacity=(\d+(?:\.\d+)?)$/i + val = reg.test(val) ? reg.exec(val)[1] / 100 : 1 + } else { + val = curEle.currentStyle[attr] + } + } + // reg = /^(-?\d+(\.\d)?)(px|pt|em|rem)?$/i + // return reg.test(val) ? parseFloat(val) : val + return parseFloat(val) + }, + $setCss(el, key, value) { + if (key === 'transform') { + //直接设置不生效 + el.style.webkitTransform = el.style.MsTransform = el.style.msTransform = el.style.MozTransform = el.style.OTransform = el.style.transform = value; + } else { + el.style[key] = value + } + }, + $nav(path, query = {}) { + this.$router.push({path, query}) + }, + $clone(v) { + return JSON.parse(JSON.stringify(v)) + }, + $console(v) { + return console.log(JSON.stringify(v, null, 4)) + }, + $duration(v) { + let m = Math.floor(v / 60) + // let s = v % 60 + let s = Math.round(v % 60) + let str = '' + if (m === 0) { + str = '00' + } else if (m > 0 && m < 10) { + str = '0' + m + } else { + str = m + } + str += ':' + if (s === 0) { + str += '00' + } else if (s > 0 && s < 10) { + str += '0' + s + } else { + str += s + } + return str + } +} \ No newline at end of file