var app = getApp()Page({ data: {  userInfo: {},  menuList: {},//菜單集合  animationData: {},  startPoint: {},//觸摸開始  dotPoint: {},//圓點坐標  startAngle: 0,//開始角度  tempAngle: 0,//移動角度  downTime: 0,//按下時間  upTime: 0,//抬起時間  // isRunning: false,//正在滾動 }, onLoad: function () {  var that = this  //調用應用實例的方法獲取全局數據  app.getUserInfo(function (userInfo) {   //更新數據   that.setData({    userInfo: userInfo,   })  })  wx.getSystemInfo({   success: function (res) {    var windowWidth = res.windowWidth * 0.5;    that.setData({     //圓點坐標,x為屏幕一半,y為半徑與margin-top之和,px     //后面獲取的觸摸坐標是px,所以這里直接用px.     dotPoint: { clientX: windowWidth, clientY: 250 }    })   }  }) }, onReady: function (e) {  var that = this;  app.menuConfig = {   menu: [    { 'index': 0, 'menu': '我的賬戶', 'src': '../images/account.png' },    { 'index': 1, 'menu': '信用卡', 'src': '../images/card.png' },    { 'index': 2, 'menu': '投資理財', 'src': '../images/investment.png' },    { 'index': 3, 'menu': '現金貸款', 'src': '../images/loan.png' },    { 'index': 4, 'menu': '特色服務', 'src': '../images/service.png' },    { 'index': 5, 'menu': '轉賬匯款', 'src': '../images/transfer.png' }   ]  }  // 繪制轉盤  var menuConfig = app.menuConfig.menu,   len = menuConfig.length,   menuList = [],   degNum = 360 / len // 文字旋轉 turn 值  for (var i = 0; i < len; i++) {   menuList.push({ deg: i * degNum, menu: menuConfig[i].menu, src: menuConfig[i].src });   console.log("menu:" + menuConfig[i].menu)  }  that.setData({   menuList: menuList  }); }, // 菜單拖動的三個方法 buttonStart: function (e) {  this.setData({   startPoint: e.touches[0]  })  var x = this.data.startPoint.clientX - this.data.dotPoint.clientX;  var y = this.data.startPoint.clientY - this.data.dotPoint.clientY;  var startAngle = Math.asin(y / Math.hypot(x, y)) * 180 / Math.PI;  this.setData({   startAngle: startAngle  }) }, buttonMove: function (e) {  //獲取滑動時的時間  var downTime = Date.now();  this.setData({   downTime: downTime  })  var that = this;  var endPoint = e.touches[e.touches.length - 1]  //根據觸摸位置計算角度  var x = endPoint.clientX - this.data.dotPoint.clientX;  var y = endPoint.clientY - this.data.dotPoint.clientY;  var moveAngle = Math.asin(y / Math.hypot(x, y)) * 180 / Math.PI  var quadrant = 1;  if (x >= 0) {   quadrant = y >= 0 ? 4 : 1;  } else {   quadrant = y >= 0 ? 3 : 2;  }  var tempAngle = 0;  // 如果是一、四象限，則直接end角度-start角度，角度值都是正值   if (quadrant == 1 || 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(),    })   }  } }})

<view class="circle-out"> <view class="circle-in">  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></image>  <view class="menu-list" catchtouchmove="buttonMove" catchtouchstart="buttonStart" catchtouchend="buttonEnd">   <view class="menu-item" wx:for="{{menuList}}" wx:key="unique" animation="{{animationData}}">    <view class="menu-circle-item" style="-webkit-transform: rotate({{item.deg}}deg);" data-menu="{{item.menu}}">     <image class="image-style" src="{{item.src}}"></image>    </view>    <view class="menu-circle-text-item" style="-webkit-transform: rotate({{item.deg}}deg);">     <text class="text-style">{{item.menu}}</text>    </view>   </view>  </view> </view></view>

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;}

var angleSpeed = this.data.tempAngle * 1000 / (upTime - this.data.downTime);