微信小程序开发之仿建行圆形菜单案例代码

quadrant == 4) { tempAngle += moveAngle - this.data.startAngle; } else // 二、三象限，色角度值是负值 { tempAngle += this.data.startAngle - moveAngle; } var menuConfig = app.menuConfig.menu; var menuList = []; for (var i = 0; i < this.data.menuList.length; i++) { menuList.push({ deg: this.data.menuList[i].deg + tempAngle, menu: menuConfig[i].menu, src: menuConfig[i].src }); } this.setData({ menuList: menuList }) //重置开始角度 this.setData({ startPoint: e.touches[e.touches.length - 1] }) var endX = this.data.startPoint.clientX - this.data.dotPoint.clientX; var endY = this.data.startPoint.clientY - this.data.dotPoint.clientY; var startAngle = Math.asin(endY / Math.hypot(endX, endY)) * 180 / Math.PI; this.setData({ startAngle: startAngle, tempAngle: tempAngle }) }, buttonEnd: function (e) { // 计算，每秒移动的角度 var that = this; var upTime = Date.now(); var angleSpeed = this.data.tempAngle * 1000 / (upTime - this.data.downTime); if (Math.abs(angleSpeed) < 100) { //速度小于100时,停止滚动 return } else { //速度大于100时,自动滚动 if (angleSpeed > 0) { if (angleSpeed > 500) angleSpeed = 500 var animationRun = wx.createAnimation({ duration: 2000, //ease-out结束时减速 timingFunction: 'ease-out' }) that.animationRun = animationRun animationRun.rotate(angleSpeed).step() that.setData({ animationData: animationRun.export(), }) } else { if (angleSpeed < -500) angleSpeed = -500 angleSpeed = Math.abs(angleSpeed); var animationRun = wx.createAnimation({ duration: 2000, // ease-out结束时减速 timingFunction: 'ease-out' }) that.animationRun = animationRun animationRun.rotate(-angleSpeed).step() that.setData({ animationData: animationRun.export(), }) } } } })

3.index.wxss

page {
 background-image: url('http://ac-ejx0nsfy.clouddn.com/ac767407f474e1c3970a.jpg');
 background-attachment: fixed;
 background-repeat: no-repeat;
 background-size: cover;
}

.circle-out {
 margin: 75px auto;
 position: relative;
 width: 350px;
 height: 350px;
 border-radius: 50%;
 background-color: #415cab;
}

.userinfo-avatar {
 width: 70px;
 height: 70px;
 border-radius: 50%;
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
}

/**子控件的透明度等于父控件透明度*子控件透明度,父控件的opacity设置后,
所以子控件opacity设置为1依然无效,必须分离开
*/

.circle-in {
 position: absolute;
 width: 330px;
 height: 330px;
 border-radius: 50%;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
 background-color: #fff;
}

/**菜单*/

.menu-list {
 position: absolute;
 left: 0;
 top: 0;
 width: inherit;
 height: inherit;
}

.menu-item {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 font-weight: 500;
}

.menu-circle-item {
 -webkit-transform-origin: 50% 150px;
 transform-origin: 50% 150px;
 margin: 0 auto;
 margin-top: 15px;
 position: relative;
 height: 50px;
 width: 50px;
 background-color: #77c2fc;
 text-align: center;
 border-radius: 50%;
}

.image-style {
 height: 25px;
 width: 25px;
 color: #f00;
 margin: 12.5px auto;
}

.text-style {
 margin: 5px auto;
 font-size: 15px;
}

/***/

.menu-circle-text-item {
 -webkit-transform-origin: 50% 100px;
 transform-origin: 50% 100px;
 margin: 0 auto;
 position: relative;
 height: 25px;
 width: auto;
 text-align: center;
}js注释补充: 
获取手指抬起时的角速度 
1.获取角度.借图说话. 
Math.sqrt( x * x + y * y )是斜边长，乘以 sin a 就是 y 的长度； 
获取a的角度：Math.asin(y / Math.hypot(x, y) ； 
[ hypot是x * x + y * y ] 
2.根据角度差计算角速度 

var angleSpeed = this.data.tempAngle * 1000 / (upTime - this.data.downTime);3.当角速度小于100的时候触摸滑动停止,不自动滚动;大于100时,自动滚动.我这里用动画,有个问题:很难把握动画持续时间和速度的关系.总感觉不够流畅.我表示不能忍. 
4.分象限的问题.看看代码就知道了.主要是根据up时的触摸点相对于圆点的X轴差值来计算.大于0就是一四象限.小于0就是二三象限.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
以上就是微信小程序开发之仿建行圆形菜单实例代码的详细内容，更多请关注php中文网其它相关文章！				
				
					微信
					分享
				

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。



  关键词：微信小程序开发之仿建行圆形菜单案例代码