第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定

完美解決,點擊下一頁上一頁,進度條跟著變化的問題!

具體代碼如下:

1.在Ebook.vue的data中定義progress=0

https://img1.sycdn.imooc.com//5bdc5a64000184de04560405.jpg

2.把Ebook.vue的progress傳給子組件Menubar,名字叫做parentProgress(為了在子組件中不重名)

https://img1.sycdn.imooc.com//5bdc5a620001b0bf03810353.jpg

3.在Ebook.vue中在上一頁和下一頁方法中添加如下代碼,主要是為了獲取progress的數(shù)值

https://img1.sycdn.imooc.com//5bdc5a630001673408980607.jpg

以上都是在Ebook.vue中的操作



--------------------------------------------



4.接著來到Menubar中通過props接收父組件傳過來的值

5.data中的progress是在input type=range 進度條的綁定的value

https://img1.sycdn.imooc.com//5bdc5a640001bef204370615.jpg

6.最為關鍵的一步,通過watch監(jiān)聽父組件傳過來的parentProgress的值是否變化,如果變化,則把變化的值賦值給進度條的progress,并且修改進度條的css樣式。

watch采用的是深度方式deep:true

https://img1.sycdn.imooc.com//5bdc5a6400019e9708560486.jpg


正在回答

8 回答

謝謝你繼續(xù)擴展閱讀器的功能

0 回復 有任何疑惑可以回復我~

章節(jié)跳轉(zhuǎn)似乎并不能用這個方法解決。跳轉(zhuǎn)之后?

const?currentLocation?=?this.rendition.currentLocation()

返回的還是跳轉(zhuǎn)之前的location,有什么方法解決嗎?

0 回復 有任何疑惑可以回復我~


按照1L同學 ‘微光世界’ 的思路,確實解決了報錯的問題。

但是Bug本身并沒有解決,即在locations對象未加載完畢時,點擊前后翻頁,進度條不更新。

http://img1.sycdn.imooc.com//5d844551000112b009190529.jpg


解決這個Bug? 我所想到的思路是:

在locations對象加載完畢的時候,去改變progress的值。這樣當加載完成時,就能正常顯示當前位置的進度條。

a.監(jiān)聽父組件傳來的bookVailable值

??bookVailable開始為false, 在加載完畢時變?yōu)閠rue,此時會執(zhí)行watch里的函數(shù)

http://img1.sycdn.imooc.com//5d84473c0001234712990255.jpg


b.調(diào)用父組件的函數(shù)

http://img1.sycdn.imooc.com//5d84475e0001cf3f09110206.jpg

c.改變progress的值

http://img1.sycdn.imooc.com//5d8447b40001075608820370.jpg

? ? ? ? ? ? ? ? ? ? ? ? http://img1.sycdn.imooc.com//5d8447ce0001d2c613490270.jpg ?

這樣progress改變,小球的位置就改變了,又因為監(jiān)聽了progress,所以樣式也會動態(tài)改變。

此時,在locations對象未加載完畢時,點擊翻頁,進度條也能正常展示。Bug解決

http://img1.sycdn.imooc.com//5d84483f000123b508910750.jpg






1 回復 有任何疑惑可以回復我~

因為locations還沒有生成所以上下頁無法點擊,所以你還要寫一個窗口來提示加載完成,或者在一開始的初始化時就直接加上

0 回復 有任何疑惑可以回復我~

v-else-if 改成v-show也可以

0 回復 有任何疑惑可以回復我~

其余邏輯都差不多,通過監(jiān)聽Ebook中progress的變化來更新進度條的展示,在展示部分我這邊進行了修改,

https://img1.sycdn.imooc.com//5c6fab2c0001d2ea06020486.jpg

https://img1.sycdn.imooc.com//5c6fab3e000144ef03750233.jpg

使用屬性綁定(v-bind:style)+計算屬性(computed)來更新progress的樣式,這樣不需要根據(jù)this.$refs.progress來獲取progress,因為progress是在v-else-if代碼塊中,所以,如果用戶沒有打開過這個設置項,就不會渲染進來,會出現(xiàn)this.$refs中沒有progress的情況,如下

https://img1.sycdn.imooc.com//5c6fabec00018bb807230358.jpg

使用計算屬性則避免了這種情況。只要在progress變化時,就會重新計算backgroundSize的值賦給綁定的style中。

0 回復 有任何疑惑可以回復我~
#1

搬磚俠

前面要改嗎
2019-02-27 回復 有任何疑惑可以回復我~
#2

superychen 回復 搬磚俠

不需要
2019-02-27 回復 有任何疑惑可以回復我~

附加:發(fā)現(xiàn)章節(jié)跳轉(zhuǎn)也沒有同步進度條

https://img1.sycdn.imooc.com//5c3c468100013c4710240146.jpg

集成到一個函數(shù)中

然后在jumpTo()?,nextPage(),prevPage()?中調(diào)用即可

https://img1.sycdn.imooc.com//5c3c471f000145a704990140.jpg

1 回復 有任何疑惑可以回復我~
#1

彭小呆 提問者

謝謝你的補充
2019-02-18 回復 有任何疑惑可以回復我~
#2

qq_elderlyboy_000

我的點章節(jié)跳轉(zhuǎn)時候,報這個錯誤:Cannot read property 'cfi' of undefined at VueComponent.showProgress
2019-09-16 回復 有任何疑惑可以回復我~

bug修復

根據(jù)樓主的方法,存在一些小bug,在locations對象未加載完成時進行翻頁控制臺會報錯

https://img1.sycdn.imooc.com//5c3bebc5000163a206670068.jpgbug1

改進如下

https://img1.sycdn.imooc.com//5c3beb0300014d5a10820294.jpg[ebook.vue]

另,在watch方法里也存在locations對象的問題;

還有ebookProgress(樓主命名為parentProgress)的值變化時,this.$refs.progress會變成undefined,

https://img1.sycdn.imooc.com//5c3bee790001c3fc06550400.jpgbug2_1

若等待locations對象加載完(進度條加載完)再進行翻頁就不會出現(xiàn)這個問題,可能是兩個進度調(diào)節(jié)方法不同步導致??

https://img1.sycdn.imooc.com//5c3bf0770001cebd06410209.jpgbug2_2

這里偷下懶

https://img1.sycdn.imooc.com//5c3bf1180001ead607290274.jpg[menuBar.vue]

以上是我再加了樓主的代碼后遇到并解決的問題


1 回復 有任何疑惑可以回復我~
#1

彭小呆 提問者

可以可以,很細心
2019-02-18 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

完美解決,點擊下一頁上一頁,進度條跟著變化的問題!

我要回答 關注問題
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號