微信小程序弧线效果实现教程

目标效果：

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

step 1 一个长方形的框

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

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
4.  
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: Shopfadden;
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布局来达到居中的目的。

至此，完成。

改变圆的位置的效果
 

Shopfa小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。

<以上资讯仅供参考，如果您需解决具体问题，建议您关注作者；如果有软件产品开发需求，可在线咨询加速度产品经理获取方案和报价>

****更多行业产品开发方案，请关注jsudo加速度 https://www.jsudo.com***

【加速度jsudo（www.jsudo.com）】是国内知名企业数字化建设提供商，为企业提供电商平台搭建（多种模式电商平台搭建：B2B/B2B2C/B2C/O2O/新零售等）、智慧园区建设、数字化营销、人才外包等服务，点击这里查看了解更多行业解决方案。