完美解決,點擊下一頁上一頁,進度條跟著變化的問題!
具體代碼如下:
1.在Ebook.vue的data中定義progress=0
2.把Ebook.vue的progress傳給子組件Menubar,名字叫做parentProgress(為了在子組件中不重名)
3.在Ebook.vue中在上一頁和下一頁方法中添加如下代碼,主要是為了獲取progress的數(shù)值
以上都是在Ebook.vue中的操作
--------------------------------------------
4.接著來到Menubar中通過props接收父組件傳過來的值
5.data中的progress是在input type=range 進度條的綁定的value
6.最為關鍵的一步,通過watch監(jiān)聽父組件傳過來的parentProgress的值是否變化,如果變化,則把變化的值賦值給進度條的progress,并且修改進度條的css樣式。
watch采用的是深度方式deep:true
2018-11-03
謝謝你繼續(xù)擴展閱讀器的功能
2020-06-23
章節(jié)跳轉(zhuǎn)似乎并不能用這個方法解決。跳轉(zhuǎn)之后?
返回的還是跳轉(zhuǎn)之前的location,有什么方法解決嗎?
2019-09-20
按照1L同學 ‘微光世界’ 的思路,確實解決了報錯的問題。
但是Bug本身并沒有解決,即在locations對象未加載完畢時,點擊前后翻頁,進度條不更新。
解決這個Bug? 我所想到的思路是:
在locations對象加載完畢的時候,去改變progress的值。這樣當加載完成時,就能正常顯示當前位置的進度條。
a.監(jiān)聽父組件傳來的bookVailable值
??bookVailable開始為false, 在加載完畢時變?yōu)閠rue,此時會執(zhí)行watch里的函數(shù)
b.調(diào)用父組件的函數(shù)
c.改變progress的值
? ? ? ? ? ? ? ? ? ? ? ?
?
這樣progress改變,小球的位置就改變了,又因為監(jiān)聽了progress,所以樣式也會動態(tài)改變。
此時,在locations對象未加載完畢時,點擊翻頁,進度條也能正常展示。Bug解決
2019-04-10
因為locations還沒有生成所以上下頁無法點擊,所以你還要寫一個窗口來提示加載完成,或者在一開始的初始化時就直接加上
2019-03-07
v-else-if 改成v-show也可以
2019-02-22
其余邏輯都差不多,通過監(jiān)聽Ebook中progress的變化來更新進度條的展示,在展示部分我這邊進行了修改,
使用屬性綁定(v-bind:style)+計算屬性(computed)來更新progress的樣式,這樣不需要根據(jù)this.$refs.progress來獲取progress,因為progress是在v-else-if代碼塊中,所以,如果用戶沒有打開過這個設置項,就不會渲染進來,會出現(xiàn)this.$refs中沒有progress的情況,如下
使用計算屬性則避免了這種情況。只要在progress變化時,就會重新計算backgroundSize的值賦給綁定的style中。
2019-01-14
附加:發(fā)現(xiàn)章節(jié)跳轉(zhuǎn)也沒有同步進度條
集成到一個函數(shù)中
然后在jumpTo()?,nextPage(),prevPage()?中調(diào)用即可
2019-01-14
bug修復
根據(jù)樓主的方法,存在一些小bug,在locations對象未加載完成時進行翻頁控制臺會報錯
改進如下
另,在watch方法里也存在locations對象的問題;
還有ebookProgress(樓主命名為parentProgress)的值變化時,this.$refs.progress會變成undefined,
若等待locations對象加載完(進度條加載完)再進行翻頁就不會出現(xiàn)這個問題,可能是兩個進度調(diào)節(jié)方法不同步導致??
這里偷下懶
以上是我再加了樓主的代碼后遇到并解決的問題