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

建行APP首页有个圆形菜单.仿了个玩具出来.

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: [
    { &＃39;index&＃39;: 0, &＃39;menu&＃39;: &＃39;我的账户&＃39;, &＃39;src&＃39;: &＃39;../images/account.png&＃39; },
    { &＃39;index&＃39;: 1, &＃39;menu&＃39;: &＃39;信用卡&＃39;, &＃39;src&＃39;: &＃39;../images/card.png&＃39; },
    { &＃39;index&＃39;: 2, &＃39;menu&＃39;: &＃39;投资理财&＃39;, &＃39;src&＃39;: &＃39;../images/investment.png&＃39; },
    { &＃39;index&＃39;: 3, &＃39;menu&＃39;: &＃39;现金贷款&＃39;, &＃39;src&＃39;: &＃39;../images/loan.png&＃39; },
    { &＃39;index&＃39;: 4, &＃39;menu&＃39;: &＃39;特色服务&＃39;, &＃39;src&＃39;: &＃39;../images/service.png&＃39; },
    { &＃39;index&＃39;: 5, &＃39;menu&＃39;: &＃39;转账汇款&＃39;, &＃39;src&＃39;: &＃39;../images/transfer.png&＃39; }
   ]
  }
  // 绘制转盘
  var menuCOnfig= app.menuConfig.menu,
   len = menuConfig.length,
   menuList = [],
   degNum = 360 / len // 文字旋转 turn 值
  for (var i = 0; i = 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  0) {
    if (angleSpeed > 500) angleSpeed = 500
    var animatiOnRun= wx.createAnimation({
     duration: 2000,
     //ease-out结束时减速
     timingFunction: &＃39;ease-out&＃39;
    })
    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: &＃39;ease-out&＃39;
    })
    that.animatiOnRun= animationRun
    animationRun.rotate(-angleSpeed).step()
    that.setData({
     animationData: animationRun.export(),
    })
   }
  }
 }
})

2.index.wxml

 
  
  
   
    
     
    
    
     {{item.menu}}
    
   
  
 

3.index.wxss

page {
 background-image: url(&＃39;http://ac-ejx0nsfy.clouddn.com/ac767407f474e1c3970a.jpg&＃39;);
 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注释补充:

获取手指抬起时的角速度

4.分象限的问题.看看代码就知道了.主要是根据up时的触摸点相对于圆点的X轴差值来计算.大于0就是一四象限.小于0就是二三象限.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

以上就是微信小程序开发之仿建行圆形菜单实例代码的详细内容，更多请关注 第一PHP社区 其它相关文章！