Update 阅读器部分开发.md

开发文档/阅读器部分开发.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 个三角形在拼接，这里隐藏下方的三角形，同时延伸上方的三角形。