优化slide

4 years ago · def588f23c
7 changed files with 150 additions and 1832 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -25,7 +25,7 @@
				@@ -25,7 +25,7 @@
    "@vitejs/plugin-vue-jsx": "^1.2.0",
    "vite": "^2.6.4",
    "less": "4.1.1",
-    "less-loader": "7.0.0",
+    "less-loader": "^7.0.0",
    "mobile-select": "^1.1.2"
  }
 }
--- a/src/pages/test/Test.vue
+++ b/src/pages/test/Test.vue
@ -1,6 +1,6 @@
				@@ -1,6 +1,6 @@
 <template>
  <div class="Test">
-<!--    <Uploader/>-->
+    <!--    <Uploader/>-->
    <TestVideo class="vue"/>
  </div>
 </template>
@ -22,7 +22,6 @@ export default {
				@@ -22,7 +22,6 @@ export default {
    return {
      showFollowSetting: true,
      switches1: true,
-      t: ''
    }
  },
  computed: {},
--- a/src/pages/test/TestVue3.vue
+++ b/src/pages/test/TestVue3.vue
@ -2,6 +2,8 @@
				@@ -2,6 +2,8 @@
  <div id="Test6">
    <p>第{{year}}年</p>
  </div>
+
+
 </template>
 <script>
 import {ref} from "vue";
--- a/src/pages/test/slide.js
+++ b/src/pages/test/slide.js
@ -6,23 +6,21 @@ export default class Slide {
				@@ -6,23 +6,21 @@ export default class Slide {
    let container = new Dom(id)
    this.wrapper = new Dom().create('<div class="slide-wrapper"></div>')
    this.list = new Dom().create('<div class="slide-list"></div>')
-    this.list.on('touchstart', () => {
-      console.log('touchstart')
-    })
-    this.list.on('touchmove', () => {
-      console.log('touchmove')
-    })
-    this.list.on('touchend', () => {
-      console.log('touchend')
-    })
+    this.list.on('touchstart', this.touchstart.bind(this))
+    this.list.on('touchmove', this.touchmove.bind(this))
+    this.list.on('touchend', this.touchend)
    this.wrapper.append(this.list)
    container.append(this.wrapper)
    this.totalSize = 52
    this.pageSize = 10
    this.pageNo = 0
+    this.judgeValue = 0
+    this.isDrawDown = true
    this.config = config
    this.appInsMap = new Map()
    this.getData()
+
+    console.log(this.list)
  }

  async getData() {
@ -53,4 +51,30 @@ export default class Slide {
				@@ -53,4 +51,30 @@ export default class Slide {
    // this.appInsMap.set(index, ins)
    return ins.$el
  }
+
+  touchstart(e) {
+    console.log('touchstart')
+    this.startLocationX = e.touches[0].pageX
+    this.startLocationY = e.touches[0].pageY
+    this.startTime = Date.now()
+  }
+
+  touchmove(e) {
+    this.moveXDistance = e.touches[0].pageX - this.startLocationX
+    this.moveYDistance = e.touches[0].pageY - this.startLocationY
+
+    // console.log('touchmove', this.moveXDistance)
+    // console.log('touchmove', this.moveYDistance)
+    this.list.css('transform', `translate3d(0,100px,0)`)
+
+    this.list.css('transform', `translate3d(0px, ${
+      this.moveYDistance +
+      (this.isDrawDown ? this.judgeValue : -this.judgeValue)
+    }px, 0px)`)
+
+  }
+
+  touchend() {
+    console.log('touchend')
+  }
 }
--- a/src/pages/test/tttt.html
+++ b/src/pages/test/tttt.html
@ -0,0 +1,98 @@
				@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
+
+</head>
+<body>
+
+<div id="app">
+  <input type="text" v-model="firstName" value="123">
+  <input type="text" v-model="lastName">
+  <input type="text" v-model="name">
+  <button @click="save(1)">显示1</button>
+  <button @click="save(2)">显示2</button>
+  <button @click="save(3)">显示3</button>
+  <ol>
+    <!--            变量对应的dom，li，变动-->
+    <li v-for="(todo,index) in todos" :key="index">
+      {{ todo.text }}-{{ index }}
+    </li>
+  </ol>
+  <ol>
+    <!--            变量对应的dom，li，变动-->
+    <li v-for="todo in todos">
+      {{ todo.text }}
+    </li>
+  </ol>
+  <div v-bind:style="styleObject">123123</div>
+
+</div>
+</body>
+</html>
+<script>
+  import axios from "axios";
+  new Vue({
+    el: '#app',
+    data: {
+      styleObject: {
+        'color': 'red',
+        'font-size': '33px'
+      },
+      account: 'account',
+      pwd: '',
+      a: 'https://cn.vuejs.org/images/logo.svg',
+      firstName: '王',
+      lastName: '念超',
+      //响应式
+      todos: [
+        //变量，变了
+        {text: '学习 JavaScript'},
+        {text: '学习 Vue'},
+        {text: '整个牛项目'}
+      ],
+      list: []
+    },
+    methods: {
+      save(type) {
+        this.show = type
+
+      },
+    },
+    computed: {
+      accountAndPwd() {
+        return this.account + this.pwd
+      },
+      name: {
+        get: function () {
+          return this.firstName + this.lastName
+        },
+      },
+    },
+    //监听器
+    watch: {
+      name(newVal, oldVal) {
+        console.log('计算属性变了', newVal, oldVal)
+      }
+    },
+    created() {
+      this.name = 1
+      //请求后端的数据
+      console.log('created')
+      console.log(this.name)
+    },
+    mounted() {
+      let ajax = new XMLHttpRequest()
+      ajax.onreadystatechange = e => {
+        if (e) {
+
+        }
+      }
+      ajax.open('xxxx')
+      ajax.send()
+
+    },
+  })
+</script>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -24,17 +24,23 @@ router.beforeEach((to, from) => {
				@@ -24,17 +24,23 @@ router.beforeEach((to, from) => {
  const toDepth = routes.findIndex(v => v.path === to.path)
  const fromDepth = routes.findIndex(v => v.path === from.path)
  // const fromDepth = routeDeep.indexOf(from.path)
+
  if (toDepth > fromDepth) {
-    let toComponentName = to.matched[0].components.default.name
-    store.commit('updateExcludeRoutes', {type: 'remove', value: toComponentName})
-    // console.log('to', toComponentName)
-    // console.log('前进')
-    // console.log('删除', toComponentName)
+    if (to.matched && to.matched.length) {
+      let toComponentName = to.matched[0].components.default.name
+      store.commit('updateExcludeRoutes', {type: 'remove', value: toComponentName})
+      // console.log('to', toComponentName)
+      // console.log('前进')
+      // console.log('删除', toComponentName)
+    }
+
  } else {
-    let fromComponentName = from.matched[0].components.default.name
-    store.commit('updateExcludeRoutes', {type: 'add', value: fromComponentName})
-    // console.log('后退')
-    // console.log('添加', fromComponentName)
+    if (from.matched && from.matched.length) {
+      let fromComponentName = from.matched[0].components.default.name
+      store.commit('updateExcludeRoutes', {type: 'add', value: fromComponentName})
+      // console.log('后退')
+      // console.log('添加', fromComponentName)
+    }
  }
  // ...
  // 返回 false 以取消导航