微信小程序 弧线效果实现

转载 2018年04月16日 11:17:43

目标效果:

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

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布局来达到居中的目的。

至此,完成。 

改变圆的位置的效果

小程序二次贝塞尔曲线,购物车商品曲线飞入效果

前段时间闲暇的时候看到一个贝塞尔曲线算法的文章,试着在小程序里去实现小程序的贝塞尔曲线算法,及其效果。 主要应用到的技术点: 1、小程序wxss布局,以及数据绑定 2、js二次bezier曲...
  • rolan1993
  • rolan1993
  • 2017-10-25 11:03:58
  • 1004

微信小程序开发之实现个滚动的效果的两种方法

微信小程序开发之实现个滚动的效果的两种方法 01 overflow: scroll 代码示例: &amp;lt;!--pages/test/test.wxml--&amp;gt; &...
  • mylovewanzi
  • mylovewanzi
  • 2018-02-10 15:12:10
  • 401

手风琴折叠菜单效果小程序

  • 2017年11月07日 10:27
  • 5KB
  • 下载

微信小程序 搜藏功能实现(八)

搜索功能用到了小程序的缓存功能:wx.setStorage 如果没有向用户提供removeStorageSync或clearStorageSync,小程序的缓存永久存在,没有失效期,缓存的最大不超...
  • chenna1102cn
  • chenna1102cn
  • 2017-07-14 14:09:09
  • 741

微信小程序吸顶效果

1. 在需要监听的外部添加&amp;lt;scroll-view style=&quot;height:100vh&quot; class=&quot;scroll-view&quot; scroll...
  • sonnyface
  • sonnyface
  • 2018-03-21 10:35:17
  • 156

微信小程序实现tab和swiper切换结合效果viewpage+tab效果

实现tab+swiper(viewpage+tab)效果的实现,tab可左右滑动,跟着页面的滑动而改变位置的实现。tab也可点击切换page...
  • u013125372
  • u013125372
  • 2017-12-04 17:05:19
  • 235

微信小程序特殊效果合集第一期

一期一期的整,假如以下内容中,有已经无法使用的部分,欢迎指出;假如你有你觉得可以加入特殊效果范围的文章或帖子,或是你有自己制作的特殊效果,欢迎回复分享; 文字跑马灯效果:http://www.wxa...
  • u012421719
  • u012421719
  • 2017-04-28 11:06:52
  • 17492

小程序tableview效果

.js Page({ data: { list: [], }, onLoad: function () { console.log('onLoad') var that = thi...
  • chenjin360
  • chenjin360
  • 2017-02-09 09:49:09
  • 1749

微信小程序开发实现图片滚动效果

微信小程序开发实现图片滚动效果 效果:左右滑动可以切换展示图片 代码: &amp;lt;!--pages/test/test.wxml--&amp;gt; &amp;lt;!-- 组件 ...
  • mylovewanzi
  • mylovewanzi
  • 2018-02-13 20:16:20
  • 457

微信小程序自定义轮播图(常用四种效果)

  • 2017年09月26日 00:16
  • 37KB
  • 下载
收藏助手
不良信息举报
您举报文章:微信小程序 弧线效果实现
举报原因:
原因补充:

(最多只允许输入30个字)