課程
/前端開發
/Vue.js
/快速入門Web閱讀器開發
怎么實現居中沒思路
2018-09-10
源自:快速入門Web閱讀器開發 3-7
正在回答
你好,思路是通過js進行運算實現,以左邊為例:
左側preview的寬度設為:leftW
右側每一個item的寬度設為:itemW
左側預覽文本的寬度設為:charW
所以需要實現居中,需要將左側預覽文本設置一個marginLeft
marginLeft =?((leftW + itemW / 2) - charW) / 2
具體的源碼實現在后續課程中會有,敬請期待:)
對左右兩側的 .preview 設置 position: relative (通過relative來實現平移居中)
字符 "A" 顯示不居中,無非是多了隱藏起來的一截 .line 的長度
所以想看讓 "A" 看起來居中的話, 其實很簡單, 只要將其平移? .line 長度的一半 即可.
-----------------------------------------------------------------------
具體做法, 可以通過 this.$ref.xxx.offsetWidth ,先獲取到 .select 的整個寬度(就是除了左右兩邊 .preview 以外的總寬度)
再用 .select 的總寬度 ÷ fontSizeList 數組的長度 得到每一個 .select-wrapper (即: 線點線) 的寬度
每一個 .select-wrapper (即: 線點線) 的寬度 ÷ 4 得到 .line 長度的一半
該值就是 左側 .preview 的 style 需要設置的 left 數值(左側 .preview 往右平移)
該值就是 右側 .preview 的 style 需要設置的 right 數值(左側 .preview 往右平移)
通過? style 屬性動態綁定,更方便
比如 當 index === 0? 或 index === fontSizeList.length - 1 時,設置? 對應最左和 最右邊的 line? flex : 0 0 0;
設置 最左 和最右 的 select-wrapper? flex: 0.5;
就是template 上看上去復雜些
//?可以用css3樣式實現啊,前提是知道fontSizeList的長度, //?我想的有點復雜,?先算出單個item寬度(100%?-?80px)?/?14; //?然后把preview移到居中的位置?((100%?-?80px)?/?14?+?40px)?/?2; //?最后再往回移動半個preview的距離((100%?-?80px)?/?14?+?40px)?/?2?-?20px; //?具體: .preview?{ ????flex:?0?0?px2rem(40); ????@include?center; ????position:?relative; ????&.left{ ????????left:?calc(((100%?-?80px)?/?14?+?40px)?/?2?-?20px); ???????} ????&.right{ ????????right:?calc(((100%?-?80px)?/?14?+?40px)?/?2?-?20px); ?????} }
小刀吃蘿卜vx
舉報
帶你了解電子書閱讀器的工作原理,通過Vue.js快速實現Web閱讀器
2 回答老師可以提供源代碼下載嗎?
3 回答請問課程源碼提供嗎?
1 回答能不能把epub文件提供下啊,自己找的都都不好用
1 回答關于Epub.js 集成開發的問題,可以提供酬勞!
2 回答2-2是不是開頭缺了一點點啊, 是吧圖片導入生成的字體嗎, 圖片提供下載嗎
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2018-09-10
你好,思路是通過js進行運算實現,以左邊為例:
左側preview的寬度設為:leftW
右側每一個item的寬度設為:itemW
左側預覽文本的寬度設為:charW
所以需要實現居中,需要將左側預覽文本設置一個marginLeft
marginLeft =?((leftW + itemW / 2) - charW) / 2
具體的源碼實現在后續課程中會有,敬請期待:)
2019-09-15
對左右兩側的 .preview 設置 position: relative (通過relative來實現平移居中)
字符 "A" 顯示不居中,無非是多了隱藏起來的一截 .line 的長度
所以想看讓 "A" 看起來居中的話, 其實很簡單, 只要將其平移? .line 長度的一半 即可.
-----------------------------------------------------------------------
具體做法, 可以通過 this.$ref.xxx.offsetWidth ,先獲取到 .select 的整個寬度(就是除了左右兩邊 .preview 以外的總寬度)
再用 .select 的總寬度 ÷ fontSizeList 數組的長度 得到每一個 .select-wrapper (即: 線點線) 的寬度
每一個 .select-wrapper (即: 線點線) 的寬度 ÷ 4 得到 .line 長度的一半
該值就是 左側 .preview 的 style 需要設置的 left 數值(左側 .preview 往右平移)
該值就是 右側 .preview 的 style 需要設置的 right 數值(左側 .preview 往右平移)
2019-05-26
通過? style 屬性動態綁定,更方便
比如 當 index === 0? 或 index === fontSizeList.length - 1 時,設置? 對應最左和 最右邊的 line? flex : 0 0 0;
設置 最左 和最右 的 select-wrapper? flex: 0.5;
就是template 上看上去復雜些
2018-11-05