本篇文章主要介绍了微信小程序开发之圆形菜单 仿建行圆形菜单实例，具有一定的参考价值，有需要的可以了解一下。
建行app首页有个圆形菜单.仿了个玩具出来.
功能介绍:
1.一个圆形背景.六个item菜单.中间是微信用户的头像;
2.触摸滚动.速度较小时,随手指滚动,手指抬起,滚动停止;速度较大时,随手指滚动,手指抬起,还会自动滚动一段时间;
上一张真机截图:
上代码:
1.index.js
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(), }) } } }})
2.index.wxml
<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>
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就是二三象限.
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
微信小程序制作首页的实现
关于微信小程序中chooseimage选择图片或者拍照
微信小程序实现导航栏选项卡的效果
以上就是微信小程序开发圆形菜单(仿建行圆形菜单)的详细内容。