diff --git a/src/assets/img/icon/components/share/bizhi.png b/src/assets/img/icon/components/share/bizhi.png new file mode 100644 index 0000000..bc328f7 Binary files /dev/null and b/src/assets/img/icon/components/share/bizhi.png differ diff --git a/src/assets/img/icon/components/share/collectYellow.png b/src/assets/img/icon/components/share/collectYellow.png new file mode 100644 index 0000000..aa6641f Binary files /dev/null and b/src/assets/img/icon/components/share/collectYellow.png differ diff --git a/src/assets/img/icon/components/share/comeon.png b/src/assets/img/icon/components/share/comeon.png new file mode 100644 index 0000000..cefab5c Binary files /dev/null and b/src/assets/img/icon/components/share/comeon.png differ diff --git a/src/assets/img/icon/components/share/copyLink.png b/src/assets/img/icon/components/share/copyLink.png new file mode 100644 index 0000000..575a512 Binary files /dev/null and b/src/assets/img/icon/components/share/copyLink.png differ diff --git a/src/assets/img/icon/components/share/copyPassword.png b/src/assets/img/icon/components/share/copyPassword.png new file mode 100644 index 0000000..f8b51bb Binary files /dev/null and b/src/assets/img/icon/components/share/copyPassword.png differ diff --git a/src/assets/img/icon/components/share/dou.png b/src/assets/img/icon/components/share/dou.png new file mode 100644 index 0000000..83cda5c Binary files /dev/null and b/src/assets/img/icon/components/share/dou.png differ diff --git a/src/assets/img/icon/components/share/duoshan.png b/src/assets/img/icon/components/share/duoshan.png new file mode 100644 index 0000000..9bd46fb Binary files /dev/null and b/src/assets/img/icon/components/share/duoshan.png differ diff --git a/src/assets/img/icon/components/share/qq.png b/src/assets/img/icon/components/share/qq.png new file mode 100644 index 0000000..f700703 Binary files /dev/null and b/src/assets/img/icon/components/share/qq.png differ diff --git a/src/assets/img/icon/components/share/report.png b/src/assets/img/icon/components/share/report.png new file mode 100644 index 0000000..cc18b63 Binary files /dev/null and b/src/assets/img/icon/components/share/report.png differ diff --git a/src/assets/img/icon/components/share/totoutiao.png b/src/assets/img/icon/components/share/totoutiao.png new file mode 100644 index 0000000..a6a2c51 Binary files /dev/null and b/src/assets/img/icon/components/share/totoutiao.png differ diff --git a/src/assets/img/icon/components/share/weChat.png b/src/assets/img/icon/components/share/weChat.png new file mode 100644 index 0000000..eca13e5 Binary files /dev/null and b/src/assets/img/icon/components/share/weChat.png differ diff --git a/src/assets/img/icon/components/share/weChatZone.png b/src/assets/img/icon/components/share/weChatZone.png new file mode 100644 index 0000000..66fa31e Binary files /dev/null and b/src/assets/img/icon/components/share/weChatZone.png differ diff --git a/src/pages/test/TestSlide.vue b/src/pages/test/TestSlide.vue index 504102f..51e6c96 100644 --- a/src/pages/test/TestSlide.vue +++ b/src/pages/test/TestSlide.vue @@ -69,6 +69,7 @@ export default { .slide-list { display: flex; + flex-direction: column; height: 100%; width: 100%; position: relative; diff --git a/src/pages/test/slide.js b/src/pages/test/slide.js index 0c0a87d..f5fa076 100644 --- a/src/pages/test/slide.js +++ b/src/pages/test/slide.js @@ -3,24 +3,46 @@ import * as Vue from "vue"; export default class Slide { constructor(id, config) { - let container = new Dom(id) - this.wrapper = new Dom().create('
') - this.list = new Dom().create('') - this.list.els[0].addEventListener('touchstart', this.touchstart.bind(this)) - this.list.els[0].addEventListener('touchmove', this.touchmove.bind(this)) - this.list.els[0].addEventListener('touchend', this.touchend.bind(this)) - this.wrapper.append(this.list) - container.append(this.wrapper) + this.wrapper = this.create('') + this.list = this.create('') + this.list.addEventListener('touchstart', this.touchstart.bind(this)) + this.list.addEventListener('touchmove', this.touchmove.bind(this)) + this.list.addEventListener('touchend', this.touchend.bind(this)) + this.wrapper.appendChild(this.list) + new Dom(id).append(new Dom(this.wrapper)) + // let container = document.querySelector(id) + // console.log(container) + // container.appendChild(this.wrapper) this.totalSize = 52 this.pageSize = 10 this.pageNo = 0 + this.judgeValue = 0 + this.currentIndex = 0 + + this.startTime = 0 + + this.startLocationX = 0 + this.startLocationY = 0 + this.moveXDistance = 0 + this.moveYDistance = 0 + + + this.height = 812 this.isDrawDown = true this.config = config this.appInsMap = new Map() this.getData() + } - console.log(this.list) + create(template) { + let tempNode = document.createElement('div'); + tempNode.innerHTML = template.trim(); + return tempNode.firstChild; + } + + css(el, ...args) { + el.style[args[0]] = args[1] } async getData() { @@ -29,9 +51,9 @@ export default class Slide { if (res.code === 200) { res.data.list.map((v, i) => { let el = this.getInsEl(v, i, false) - let item = new Dom().create('') - item.append(new Dom(el)) - this.list.append(item) + let item = this.create('') + item.appendChild(el) + this.list.appendChild(item) }) } } @@ -57,6 +79,9 @@ export default class Slide { this.startLocationX = e.touches[0].pageX this.startLocationY = e.touches[0].pageY this.startTime = Date.now() + console.log('touchstart', this.startTime) + + this.css(this.list, 'transition-duration', '0ms') } touchmove(e) { @@ -65,16 +90,50 @@ export default class Slide { // 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.css(this.list, 'transform', `translate3d(0px, ${ + this.getHeight() + this.moveYDistance + (this.isDrawDown ? this.judgeValue : -this.judgeValue) }px, 0px)`) + } + getHeight() { + return -this.currentIndex * this.height } touchend() { - console.log('touchend') + + let endTime = Date.now() + let gapTime = endTime - this.startTime + + if (Math.abs(this.moveYDistance) < 20) gapTime = 1000 + if (Math.abs(this.moveYDistance) > (this.height / 3)) gapTime = 100 + + // console.log(gapTime) + + this.currentIndex += 1 + + console.log('currentIndex', this.currentIndex) + + this.css(this.list, 'transition-duration', '300ms') + this.css(this.list, 'transform', `translate3d(0px, ${ + this.getHeight() + }px, 0px)`) + + return + if (gapTime < 150) { + if (this.isDrawDown) { + this.currentIndex += 1 + } else { + this.currentIndex -= 1 + } + console.log(1) + this.currentIndex += 1 + + this.css(this.list, 'transition-duration', '300ms') + this.css(this.list, 'transform', `translate3d(0px, ${ + this.currentIndex * this.height + }px, 0px)`) + } } } \ No newline at end of file