重写首页滑动逻辑

6 years ago · 7dceb6305e
3 changed files with 426 additions and 13233 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,48 +1,48 @@
				@@ -1,48 +1,48 @@
 {
-  "name": "douyin",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "push": "git add ./ && git commit -m 'dubug' && git push origin master"
-  },
-  "dependencies": {
-    "vue": "^2.5.17",
-    "vue-router": "^3.0.1"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.0.3",
-    "@vue/cli-plugin-eslint": "^3.0.3",
-    "@vue/cli-service": "^3.0.3",
-    "vue-template-compiler": "^2.5.17",
-    "node-sass": "^4.9.3",
-    "sass-loader": "^7.1.0",
-    "vue-awesome-swiper": "^3.1.3"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
+    "name": "douyin",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "serve": "vue-cli-service serve",
+        "build": "vue-cli-service build",
+        "lint": "vue-cli-service lint",
+        "push": "git add ./ && git commit -m 'dubug' && git push origin master"
    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "rules": {},
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ]
+    "dependencies": {
+        "vue": "^2.5.17",
+        "vue-router": "^3.0.1"
+    },
+    "devDependencies": {
+        "@vue/cli-plugin-babel": "^3.0.3",
+        "@vue/cli-plugin-eslint": "^3.0.3",
+        "@vue/cli-service": "^3.0.3",
+        "vue-template-compiler": "^2.5.17",
+        "node-sass": "^4.9.3",
+        "sass-loader": "^7.1.0",
+        "vue-awesome-swiper": "^3.1.3"
+    },
+    "eslintConfig": {
+        "root": true,
+        "env": {
+            "node": true
+        },
+        "extends": [
+            "plugin:vue/essential",
+            "eslint:recommended"
+        ],
+        "rules": {},
+        "parserOptions": {
+            "parser": "babel-eslint"
+        }
+    },
+    "postcss": {
+        "plugins": {
+            "autoprefixer": {}
+        }
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not ie <= 8"
+    ]
 }
--- a/src/tools/抖音滑动效果v2.html
+++ b/src/tools/抖音滑动效果v2.html
@ -0,0 +1,381 @@
				@@ -0,0 +1,381 @@
+<!DOCTYPE html>
+<html lang="cn">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="screen-orientation" content="portrait"/>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="format-detection" content="telephone=no">
+    <meta name="full-screen" content="yes">
+    <meta name="x5-fullscreen" content="true">
+    <title>Document</title>
+    <!--        <script  src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>-->
+    <script src="https://lib.baomitu.com/zepto/1.2.0/zepto.js"></script>
+    <!--    <script src="event.js"></script>-->
+    <script src="http://www.ttentau.top/touch.js"></script>
+    <script src="http://www.ttentau.top/fx.js"></script>
+
+    <style>
+        html, body {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+            background: #2e3244;
+        }
+
+        .container {
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            /*overflow: auto;*/
+        }
+
+        .wrapper {
+            position: relative;
+            /*left: -100%;*/
+            /*top: -350px;*/
+            display: flex;
+            width: 100%;
+            height: 100%;
+            /*height: 812px;*/
+            /*overflow-y:hidden ;*/
+
+        }
+
+        .swiper-item {
+            /*flex-shrink: 0;*/
+            position: absolute;
+            width: 100%;
+            height: 100%;
+        }
+
+        .left-container {
+            top: 0;
+            left: 0;
+            overflow: hidden;
+        }
+
+        .content-list {
+            position: absolute;
+            /*top: -100%;*/
+            height: 100%;
+            width: 100%;
+        }
+
+        .content-item {
+            width: 100%;
+            height: 100%;
+            position: relative;
+        }
+
+        .item-tool {
+            height: 300px;
+            width: 50px;
+            background: #ccc;
+            position: absolute;
+            bottom: 100px;
+            right: 30px;
+        }
+
+        .footer {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 30px;
+            background: #666;
+        }
+
+        .right-container {
+            top: 0;
+            left: 100%;
+            overflow: auto;
+        }
+
+        .user-videos {
+            height: 12000px;
+        }
+
+        .console {
+            display: none;
+            position: absolute;
+            top: 0;
+            right: 0;
+            height: 500px;
+            overflow: auto;
+        }
+
+        p {
+            margin: 0;
+        }
+    </style>
+</head>
+
+<body>
+<div class="container">
+    <div class="wrapper">
+        <div class="left-container swiper-item">
+            <div class="content-list">
+                <div class="content-item">11111
+                    <div class="item-tool"></div>
+                </div>
+                <div class="content-item">22222
+                    <div class="item-tool"></div>
+                </div>
+            </div>
+            <div class="footer"></div>
+        </div>
+        <div class="right-container swiper-item ">
+            <div class="user-bg">user-bg</div>
+            <div class="user-videos">user-videos
+                <p>user-videos</p>
+                <p>user-videos</p>
+                <p>user-videos</p>
+                <p>user-videos</p>
+                <p>user-videos</p>
+                <p>user-videos</p>
+                <p>user-videos</p>
+                <p>user-videos</p>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="console">
+
+</div>
+</body>
+<script>
+    // let
+    let consoleEl = $('.console')
+    let swiperItem = $('.swiper-item')
+    let contentItem = $('.content-item')
+    let wrapper = $('.wrapper')
+    let contentList = $('.content-list')
+
+    let height = $('body').height()
+    let width = $('body').width()
+
+    let startLocationY = 0
+    let startLocationX = 0
+
+    let lastLocationY = 0
+    let lastLocationX = 0
+
+    let moveXDistance = 0
+    let moveYDistance = 0
+
+    let judgeValue = 30
+
+    let startTime
+    let currentIndex
+    let currentSwiperItemIndex
+    let isDrawDown
+    let isDrawRight
+
+    let isCanDownWiping = false
+    let isCanRightWiping = false
+    let isNeedCheck = true
+    // let isCanDownWiping = true
+    // let isCanRightWiping = true
+    // let isNeedCheck = false
+
+
+    function checkDirection() {
+        consoleEl.append('<p>' + 'isNeedCheck:' + isNeedCheck + '</p>')
+
+
+        if (!isNeedCheck) {
+            // console.log('不需要检测了')
+            return
+        }
+        consoleEl.append('<p>' + 'moveXDistance:' + moveXDistance + '</p>')
+        consoleEl.append('<p>' + 'moveYDistance:' + moveYDistance + '</p>')
+
+        if (Math.abs(moveXDistance) > judgeValue || Math.abs(moveYDistance) > judgeValue) {
+            //X 除以 Y
+            let angle = (Math.abs(moveXDistance) * 10) / (Math.abs(moveYDistance) * 10)
+            if (angle > 0.7 && angle < 1.3) {
+                isNeedCheck = false
+                return
+            }
+            consoleEl.append('<p>' + 'angle:' + angle + '</p>')
+
+            // console.log('x------------', moveXDistance)
+            // console.log('y------------', moveYDistance)
+            // console.log('角度------------', angle)
+
+            if (angle < 0.6) {
+                //上下划
+                isCanDownWiping = true
+                isCanRightWiping = false
+                isNeedCheck = false
+                return
+            }
+            if (angle > 5) {
+                //左右划
+                isCanDownWiping = false
+                isCanRightWiping = true
+                isNeedCheck = false
+                return
+            }
+        }
+    }
+
+    function resetConfig() {
+        isCanDownWiping = false
+        isCanRightWiping = false
+        isNeedCheck = true
+        moveXDistance = 0
+        moveYDistance = 0
+        // isCanDownWiping = true
+        // isCanRightWiping = true
+        // isNeedCheck = false
+    }
+
+    swiperItem
+        .on('touchstart', function (e) {
+            consoleEl.empty()
+            consoleEl.append('<p>swiperItem touchstart</p>')
+            currentSwiperItemIndex = $(this).index()
+            startLocationX = e.touches[0].pageX
+            startTime = Date.now()
+        })
+        .on('touchmove', function (e) {
+            consoleEl.append('<p>' + 'si move  isCanRightWiping:' + isCanRightWiping + '</p>')
+
+            lastLocationX = e.touches[0].pageX
+            moveXDistance = lastLocationX - startLocationX
+            isDrawRight = moveXDistance < 0
+
+            // console.log(moveXDistance)
+            checkDirection()
+            if (isCanRightWiping) {
+                if (isDrawRight) {
+                    wrapper.css({left: -(currentSwiperItemIndex + 0) * width + moveXDistance + judgeValue})
+                } else {
+                    wrapper.css({left: -(currentSwiperItemIndex + 0) * width + moveXDistance - judgeValue})
+                }
+            }
+        })
+        .on('touchend', function (e) {
+            consoleEl.append('<p>swiperItem touchend</p>')
+
+            if (!isCanRightWiping) {
+                // resetConfig()
+                isNeedCheck = true
+                return
+            }
+            // console.log('contentList-touchend', e)
+            let endTime = Date.now()
+            let gapTime = endTime - startTime
+
+            // 如果
+            if (Math.abs(moveXDistance) < 20) {
+                gapTime = 1000
+            }
+            if (Math.abs(moveXDistance) > (width / 3)) {
+                gapTime = 100
+            }
+            // console.log('是否向左划',isDrawRight)
+            if (gapTime < 150) {
+                // console.log('小于500', currentIndex)
+                if (isDrawRight) {
+                    // console.log('往下划');
+                    if (currentSwiperItemIndex === swiperItem.length - 1) {
+                        return wrapper.animate({left: -(swiperItem.length - 1) * width}, 200)
+                    }
+                    wrapper.animate({left: -(currentSwiperItemIndex + 1) * width}, 200)
+                } else {
+                    // console.log('往上划');
+                    if (currentSwiperItemIndex === 0) {
+                        return wrapper.animate({left: 0}, 200)
+                    }
+                    wrapper.animate({left: -(currentSwiperItemIndex - 1) * width}, 200)
+                }
+            } else {
+                wrapper.animate({left: -(currentSwiperItemIndex) * width}, 200, 'linear')
+            }
+
+            resetConfig()
+        })
+    contentList
+        .on('touchstart', '.content-item', function (e) {
+            consoleEl.empty()
+            consoleEl.append('<p>contentItem touchstart</p>')
+            currentIndex = $(this).index()
+            startLocationY = e.touches[0].pageY
+            startLocationX = e.touches[0].pageX
+            startTime = Date.now()
+        })
+        .on('touchmove', function (e) {
+            consoleEl.append('<p>' + 'ci move  isCanDownWiping:' + isCanDownWiping + '</p>')
+
+            lastLocationY = e.touches[0].pageY
+
+            moveYDistance = lastLocationY - startLocationY
+            isDrawDown = moveYDistance < 0
+
+            checkDirection()
+            if (isCanDownWiping) {
+                if (isDrawDown) {
+                    contentList.css({top: -(currentIndex + 0) * height + moveYDistance + judgeValue})
+                } else {
+                    contentList.css({top: -(currentIndex + 0) * height + moveYDistance - judgeValue})
+                }
+            }
+        })
+        .on('touchend', function (e) {
+            consoleEl.append('<p>contentItem touchend</p>')
+
+            if (!isCanDownWiping) {
+                isNeedCheck = true
+                return
+            }
+            // console.log('contentList-touchend', e)
+            let endTime = Date.now()
+            moveYDistance = lastLocationY - startLocationY
+            let gapTime = endTime - startTime
+
+            // 如果
+            if (Math.abs(moveYDistance) < 20) {
+                gapTime = 1000
+            }
+            if (Math.abs(moveYDistance) > (width / 3)) {
+                gapTime = 100
+            }
+
+            if (gapTime < 150) {
+                // console.log('小于500', currentIndex)
+                if (isDrawDown) {
+                    console.log('往下划')
+                    if ($('.content-item').length < currentIndex + 3) {
+                        loadNewVideo()
+                    }
+                    // if (currentIndex === contentItem.length - 1) {
+                    //     return contentList.animate({top: -(contentItem.length - 1) * height}, 200)
+                    // }
+                    contentList.animate({top: -(currentIndex + 1) * height}, 200)
+                } else {
+                    console.log('往上划')
+                    if (currentIndex === 0) {
+                        return contentList.animate({top: 0}, 200)
+                    }
+                    contentList.animate({top: -(currentIndex - 1) * height}, 200)
+                }
+            } else {
+                contentList.animate({top: -(currentIndex) * height}, 200, 'linear')
+            }
+            resetConfig()
+        })
+
+    function loadNewVideo() {
+        console.log('加载新的视频到末尾')
+        let html = ` <div class="content-item">${currentIndex}
+                    <div class="item-tool"></div>
+                </div>`
+        contentList.append(html)
+    }
+</script>
+
+</html>