diff --git "a/\345\274\200\345\217\221\346\226\207\346\241\243/\351\230\205\350\257\273\345\231\250\351\203\250\345\210\206\345\274\200\345\217\221.md" "b/\345\274\200\345\217\221\346\226\207\346\241\243/\351\230\205\350\257\273\345\231\250\351\203\250\345\210\206\345\274\200\345\217\221.md" index a17d0b3..f9c4617 100644 --- "a/\345\274\200\345\217\221\346\226\207\346\241\243/\351\230\205\350\257\273\345\231\250\351\203\250\345\210\206\345\274\200\345\217\221.md" +++ "b/\345\274\200\345\217\221\346\226\207\346\241\243/\351\230\205\350\257\273\345\231\250\351\203\250\345\210\206\345\274\200\345\217\221.md" @@ -267,35 +267,34 @@ stopPropagation() 禁止默认事件以及防止向上冒泡。 index.vue 采用绝对定位监听 offsetY 来改变 top 值就可以实现下拉的效果(当然,用 transform 来实现位移是更好的,因为其不会触发回流) 同时在 app.vue 中将背景色设置为灰色,这样下拉时就会拉出灰色。 - -``` js +```js watch: { - offsetY(v) { - // 标题和菜单出现时不允许添加书签,因为会造成覆盖 - if (!this.menuVisible && this.bookAvailable) { - if (v > 0) { - this.move(v) - } else if (v === 0) { - this.restore() // restore screen - } + offsetY(v) { // computed 混入了 vuex store 中的 offsetY,通过 watch 监听其变化 + // 标题和菜单出现时不允许添加书签,因为会造成覆盖 + if (!this.menuVisible && this.bookAvailable) { + if (v > 0) { + this.move(v) + } else if (v === 0) { + this.restore() // restore screen } } - }, + } +}, methods: { - restore(v) { - this.$refs.ebook.style.top = 0 - this.$refs.ebook.style.transition = `all .2s linear ` - // 需要清除这个动画,否则下次下拉也会触发造成不流畅 - setTimeout(() => { - this.$refs.ebook.style.transition = '' - }, 200) - }, - move(v) { - this.$refs.ebook.style.top = v + 'px' - }, + // 复原操作,注意添加过渡动画后要删除(这里是通过定时器实现) + restore(v) { + this.$refs.ebook.style.top = 0 + this.$refs.ebook.style.transition = `all .2s linear ` + // 需要清除这个动画,否则下次下拉也会触发造成不流畅 + setTimeout(() => { + this.$refs.ebook.style.transition = '' + }, 200) + }, + move(v) { + this.$refs.ebook.style.top = v + 'px' // 改变 top 值来实现下拉的效果 + } +} ``` -通过改变样式中的 top 值就可以实现逐渐下拉的效果,这里要注意下拉之后的复原,以及过渡动画的设置与清除。 - **思考3**:书签怎么画? 通过 border 属性画一个书签,width 和 height 都设为 0 的话 border 就相当于 4 个三角形在拼接,这里隐藏下方的三角形,同时延伸上方的三角形。