本篇文章主要介绍了微信小程序开发之仿建行圆形菜单实例代码，具有一定的参考价值，有需要的可以了解一下。
建行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就是二三象限.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
以上就是微信小程序开发之仿建行圆形菜单实例代码的详细内容。