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

发布日期： 2018-06-27 阅读量： 作者： 网络

本篇文章主要介绍了微信小程序开发之圆形菜单仿建行圆形菜单实例，具有一定的参考价值，有需要的可以了解一下。

建行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 = 0) {
   quadrant = y &gt;= 0 ? 4 : 1;
  } else {
   quadrant = y &gt;= 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  0) {
    if (angleSpeed &gt; 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 <p></p><p>2.index.wxml<br></p><p class="jb51code"></p><pre class="brush:html;toolbar:false;"><view>
 <view>
  <image></image>
  <view>
   <view>
    <view>
     <image></image>
    </view>
    <view>
     <text>{{item.menu}}</text>
    </view>
   </view>
  </view>
 </view></view>

# 微信小程序 # 菜单 # 圆形菜单

上一篇: 如何开发一个自动生成图片库的WordPress插件

下一篇: Golang 函数的返回值如何声明和使用？

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

随便看看