亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

老師,能提供作業的答案嗎?

怎么實現居中沒思路

正在回答

4 回答

你好,思路是通過js進行運算實現,以左邊為例:

左側preview的寬度設為:leftW

右側每一個item的寬度設為:itemW

左側預覽文本的寬度設為:charW

所以需要實現居中,需要將左側預覽文本設置一個marginLeft

marginLeft =?((leftW + itemW / 2) - charW) / 2

具體的源碼實現在后續課程中會有,敬請期待:)

3 回復 有任何疑惑可以回復我~
  1. 對左右兩側的 .preview 設置 position: relative (通過relative來實現平移居中)

  2. 字符 "A" 顯示不居中,無非是多了隱藏起來的一截 .line 的長度

  3. 所以想看讓 "A" 看起來居中的話, 其實很簡單, 只要將其平移? .line 長度的一半 即可.

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

  4. 具體做法, 可以通過 this.$ref.xxx.offsetWidth ,先獲取到 .select 的整個寬度(就是除了左右兩邊 .preview 以外的總寬度)

  5. 再用 .select 的總寬度 ÷ fontSizeList 數組的長度 得到每一個 .select-wrapper (即: 線點線) 的寬度

  6. 每一個 .select-wrapper (即: 線點線) 的寬度 ÷ 4 得到 .line 長度的一半

  7. 該值就是 左側 .preview 的 style 需要設置的 left 數值(左側 .preview 往右平移)

  8. 該值就是 右側 .preview 的 style 需要設置的 right 數值(左側 .preview 往右平移)



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

通過? style 屬性動態綁定,更方便

比如 當 index === 0? 或 index === fontSizeList.length - 1 時,設置? 對應最左和 最右邊的 line? flex : 0 0 0;

設置 最左 和最右 的 select-wrapper? flex: 0.5;

就是template 上看上去復雜些

0 回復 有任何疑惑可以回復我~
//?可以用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);
?????}
}


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

小刀吃蘿卜vx

不用這么復雜吧 `.preview { flex: 0 0 px2rem(50); @include center; box-sizing: border-box; &:first-of-type { padding-left: calc((100% - 100px) / 14); } &:last-of-type { padding-right: calc((100% - 100px) / 14); } }`
2019-12-25 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

老師,能提供作業的答案嗎?

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

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號