小程序模板網(wǎng)

微信小程序 弧線效果實現(xiàn)

發(fā)布時間:2018-05-09 14:41 所屬欄目:小程序開發(fā)教程

目標(biāo)效果:

這個弧線的實現(xiàn) 
我們所有元素默認的都是長方形的元素,所以如果想要實現(xiàn)這個弧線,那必然需要做出圓形。

 

step 1 一個長方形的框

設(shè)置 overflow: hidden; 
原理就是:方形框里邊覆蓋一個圓形的框,然后給外邊的方框設(shè)置 overflow: hidden; 那么多出的圓的部分將不會顯示

 

step 2 做一個圓

 

				
  1. width:930rpx;
  2. height:930rpx;
  3. border-radius: 465rpx;

讓半徑radius等于寬高的一半就可以將一個方框設(shè)為圓形  原理很簡單,“正方形的內(nèi)切圓的半徑等于正方形邊長的一半”。

 

step 3 調(diào)整圓相對于外邊的方框的位置就行

 

				
  1. margin-left:-224rpx;
  2. margin-top:-303px;

一個點 我發(fā)現(xiàn)可以使用left 和 top 但是無法使用bottom 和right。  也是,畢竟默認的都是從左上開始排列的。

完整代碼

 

				
  1. //.wxml
  2. <view class='distance' wx:if='{{distanceFlag}}'>
  3. <view class='dist_s'></view>
  4. </view>
  5. //.wxss
  6. .distance{
  7. width:498rpx;
  8. height:626rpx;
  9. background-color: #fff;
  10. border-radius: 12rpx;
  11. position:absolute;
  12. z-index:99999;
  13. top:200rpx;
  14. left:126rpx;
  15. overflow: hidden;
  16. }
  17. .dist_s{
  18. width:930rpx;
  19. height:930rpx;
  20. border-radius: 465rpx;
  21. background-color: rgb(233, 233, 233);
  22. margin-left:-224rpx;
  23. margin-top:-303px;
  24. }

事實證明:為了適配各種設(shè)備,雖然寬度都設(shè)置好了,但是高度需要適配,一般情況下不能使用一個固定的值,而是應(yīng)該使用比例。

實驗證明,任何形式的居中都不如想方設(shè)法讓他可以使用flex布局來達到居中的目的。

至此,完成。 

改變圓的位置的效果



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24366.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢