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


Posted in Javascript onDecember 12, 2016

建行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就是二三象限.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
深入理解JS函数的参数(arguments)的使用
May 28 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
jQuery实现拖动效果的实例代码
Jun 25 jQuery
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
深入研究React中setState源码
Nov 17 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 Javascript
javascript实现前端分页功能
Nov 26 Javascript
深入理解javascript中concat方法
Dec 12 #Javascript
js仿微信语音播放实现思路
Dec 12 #Javascript
解析JavaScript数组方法reduce
Dec 12 #Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
Dec 12 #Javascript
JS双击变input框批量修改内容
Dec 12 #Javascript
jQuery中animate的几种用法与注意事项
Dec 12 #Javascript
Websocket协议详解及简单实例代码
Dec 12 #Javascript
You might like
多重?l件?合查?(一)
2006/10/09 PHP
神盾加密解密教程(二)PHP 神盾解密
2014/06/08 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
学习jQuey中的return false
2015/12/18 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
Python实现二叉搜索树BST的方法示例
2019/07/30 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
详解Python中Pyyaml模块的使用
2020/10/08 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
英国领先的汽车轮胎和快速健康中心:Kwik Fit
2017/10/29 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
绿化先进工作者事迹材料
2014/01/30 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
教师产假请假条范文
2014/04/10 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
2015年双拥工作总结
2015/04/08 职场文书
小学生运动会广播
2015/08/19 职场文书
2016小学教师读书心得体会
2016/01/13 职场文书
SpringBoot集成Redis,并自定义对象序列化操作
2021/06/22 Java/Android
Python使用DFA算法过滤内容敏感词
2022/04/22 Python