<view> <view> <image src="https://www.jb51.net/{{userInfo.avatarUrl}}"></image> <view catchtouchmove="buttonMove" catchtouchstart="buttonStart" catchtouchend="buttonEnd"> <view wx:for="{{menuList}}" wx:key="unique" animation="{{animationData}}"> <view data-menu="{{item.menu}}"> <image src="https://www.jb51.net/{{item.src}}"></image> </view> <view> <text>{{item.menu}}</text> </view> </view> </view> </view> </view>
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就是二三象限.