微信小程序-交互效果
文章平均质量分 65
一个......
这个作者很懒,什么都没留下…
展开
-
微信小程序-环形图(带动画)
效果图思路使用一个canvas绘制(带动画);通过画弧线,设置线宽,来实现圆环效果;计算每段圆弧的起始角度和终止角度,用递归做动画;绘制完第一段圆弧块–>再绘制下一块,下一块的起始角度是上一块结束的角度+间隙(中间的白色分割线);当最后一段圆弧块绘制完成时,绘制延伸线+文字;如下图,通过三角函数确定延伸点A点位置,判断延伸点位于中心点的左或右,绘制延伸线;确定A点坐标:已知A点到圆心的长度edge = 半径r + 伸出去点的长度;let edgeX = Math.cos(st原创 2021-03-17 15:12:15 · 1973 阅读 · 7 评论 -
微信小程序-canvas 2d带动画的半圆形刻度进度条
效果图实现思路代码过多,但不复杂采用Canvas 2D,文档请搜索h5 canvas 开发文档;定义4个canvas,通过相对定位重叠在一起: <!-- 绘制背景半圆刻度 --> <canvas type="2d" id="bgLine" style="position:absolute;"></canvas> <!-- 绘制百分比刻度(带动画) --> <canvas type="2d" id="line" st原创 2021-03-16 18:03:17 · 1663 阅读 · 3 评论 -
小程序卡片式轮播
微信小程序开发交流微信群 ↓ 扫码入群,备注微信小程序承接微信小程序开发。扫码加微信。效果图index.wxml<swiper previous-margin="80rpx" next-margin="80rpx" bindchange="bindchange" current="{{swiperIndex}}"> <swiper-item> ...原创 2019-07-29 12:37:28 · 2284 阅读 · 0 评论 -
js倒计时效果,传入时间2019-07-30 10:20:00输出xx天xx小时xx分钟xx秒
微信小程序开发交流微信群 ↓ 扫码入群,备注微信小程序承接微信小程序开发。扫码加微信。倒计时,主要应用于活动倒计时当前时间:2019-07-29 10:56:00//时间传活动截止时间const app = getApp();Page({ data:{ currentTime:'' }, onLoad(){ app.countdown(this,'2019-07-30...原创 2019-07-29 11:04:36 · 467 阅读 · 0 评论 -
js时间格式化几分钟前、几小时前
微信小程序开发交流微信群 ↓ 扫码入群,备注微信小程序承接微信小程序开发。扫码加微信。时间格式化一分钟前、几天前当前时间:2019-07-29 10:21:00//打印console.log(app.getDateDiff('2019-07-29 10:20:00'))//输出 1分钟前console.log(app.getDateDiff('2019-07-28 12:2...原创 2019-07-29 10:29:43 · 2170 阅读 · 0 评论 -
微信小程序-canvas雷达图
效果图//wxml<view class='radar-container'> <canvas class='radarCanvas' canvas-id='radarCanvas' style='width:360px'></canvas></view>//wcss.radar-container { width: 100%;...原创 2019-04-25 15:36:26 · 1564 阅读 · 1 评论 -
canvas绘制三次贝赛尔曲线及应用-曲线图
微信小程序开发交流微信群 ↓ 扫码入群,备注微信小程序承接微信小程序开发。扫码加微信。效果图之后会更新成组件利用三次贝赛尔曲线,将折线图变曲线图前提-搭框架let curve = { mW: 360, //canvas宽 mH: 250, //canvas高 mCenter: 180, //中心点 hCenter: 125, //中心点 curveText...原创 2019-08-02 17:12:31 · 1041 阅读 · 0 评论 -
小程序canvas彩虹图+动画
效果图wxml<canvas canvas-id="arc" style="width:574rpx;height:287rpx;margin:auto;"></canvas>jsPage({ data: { }, onReady(){ this.drawArc({ arcW: 574,//宽rpx arcH: 287...原创 2019-09-06 11:45:02 · 1722 阅读 · 0 评论