微信小程序开发之圆形菜单 仿建行圆形菜单

[复制链接]
查看1519 | 回复8 | 2018-2-6 19:01:08 | 显示全部楼层 |阅读模式
上一张真机截图:

微信小程序开发之圆形菜单 仿建行圆形菜单

微信小程序开发之圆形菜单 仿建行圆形菜单

上代码:
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(),        })      }    }  }})[/i][/i][/i][/i][/i][/i][i]2.index.wxml[/i]
[i][i][i]<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>[/i][/i][/i][i]3.index.wxss[/i]
[i]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;}[/i][i]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就是二三象限.[/i]
[hr][i]说是个玩具,肯定是有原因:
1.目前真机跑不起来.
2.滚动卡顿.
[/i]

回复

使用道具 举报

galaxy | 2018-2-7 16:50:46 | 显示全部楼层
[size=5]棒棒哒!楼主辛苦了,希望多发好贴![/size]
回复

使用道具 举报

确实是个孩子谥 | 2021-11-7 14:46:21 | 显示全部楼层
厉害了悟空源码,这么多资源
回复

使用道具 举报

护研的墙偃 | 2022-6-1 12:41:11 | 显示全部楼层
厉害了悟空源码,这么多资源
回复

使用道具 举报

千山落月坝 | 2023-9-16 13:35:06 | 显示全部楼层
悟空源码太厉害,资源真多!
回复

使用道具 举报

成哥337 | 2023-9-25 08:56:02 | 显示全部楼层
祝愿悟空源码越办越好!
回复

使用道具 举报

立郎 | 2023-10-6 05:42:32 | 显示全部楼层
5kym.cn这个站资源太全了
回复

使用道具 举报

们至熟两创 | 2023-11-6 18:32:19 | 显示全部楼层
这个站很好,资源多,教程全
回复

使用道具 举报

赏真阁 | 2024-5-17 23:10:44 | 显示全部楼层
厉害了悟空源码,这么多资源
回复

使用道具 举报

清风哥 | 2024-5-24 22:42:02 | 显示全部楼层
找了很多地方都不能下载,终于在悟空源码找到了
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则