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


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 相关文章推荐
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
大型JavaScript应用程序架构设计模式
Jun 29 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
老生常谈ES6中的类
Jul 31 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
JS查找孩子节点简单示例
Jul 25 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
解决控件遮挡问题:关于有窗口元素和无窗口元素
2007/01/28 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
js调出上下文菜单的实例
2015/12/17 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
vue从使用到源码实现教程详解
2016/09/19 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
2018/01/08 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
python使用BeautifulSoup分页网页中超链接的方法
2015/04/04 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
Python代码缩进和测试模块示例详解
2018/05/07 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
Python Pillow Image Invert
2019/01/22 Python
Python高级property属性用法实例分析
2019/11/19 Python
pycharm导入源码的具体步骤
2020/08/04 Python
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
销售副总经理岗位职责
2013/12/11 职场文书
十周年庆典策划方案
2014/06/03 职场文书
社会实践的活动方案
2014/08/22 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
限期整改通知书
2015/04/22 职场文书
社会实践活动总结格式
2015/05/11 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
MySQL中in和exists区别详解
2021/06/03 MySQL
Python机器学习之底层实现KNN
2021/06/20 Python