微信小程序 弧线效果实现

目标效果：

image

这个弧线的实现
我们所有元素默认的都是长方形的元素，所以如果想要实现这个弧线，那必然需要做出圆形。

step 1 一个长方形的框

设置 overflow: hidden;
原理就是：方形框里边覆盖一个圆形的框，然后给外边的方框设置 overflow: hidden; 那么多出的圆的部分将不会显示

step 2 做一个圆

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

让半径radius等于宽高的一半就可以将一个方框设为圆形
原理很简单，“正方形的内切圆的半径等于正方形边长的一半”。

step 3 调整圆相对于外边的方框的位置就行

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

一个点 我发现可以使用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.  `}`

事实证明：为了适配各种设备，虽然宽度都设置好了，但是高度需要适配，一般情况下不能使用一个固定的值，而是应该使用比例。

实验证明，任何形式的居中都不如想方设法让他可以使用flex布局来达到居中的目的。

至此，完成。

image

改变圆的位置的效果

作者：王月_92f2
链接：微信小程序 弧线效果实现-教程-小程序社区-微信小程序-微信小程序开发社区-小程序开发论坛-微信小程序联盟
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。