微信小程序開發(fā)之圓形菜單仿建行圓形菜單實(shí)例

更新時(shí)間：2016年12月12日 15:50:12 作者：dzp_coder

本篇文章主要介紹了微信小程序開發(fā)之圓形菜單仿建行圓形菜單實(shí)例，具有一定的參考價(jià)值，有需要的可以了解一下。

建行APP首頁有個(gè)圓形菜單.仿了個(gè)玩具出來.

功能介紹:

1.一個(gè)圓形背景.六個(gè)item菜單.中間是微信用戶的頭像;

2.觸摸滾動(dòng).速度較小時(shí),隨手指滾動(dòng),手指抬起,滾動(dòng)停止;速度較大時(shí),隨手指滾動(dòng),手指抬起,還會(huì)自動(dòng)滾動(dòng)一段時(shí)間;

上一張真機(jī)截圖:

上代碼:

1.index.js

var app = getApp()
Page({
 data: {
  userInfo: {},
  menuList: {},//菜單集合
  animationData: {},
  startPoint: {},//觸摸開始
  dotPoint: {},//圓點(diǎn)坐標(biāo)
  startAngle: 0,//開始角度
  tempAngle: 0,//移動(dòng)角度
  downTime: 0,//按下時(shí)間
  upTime: 0,//抬起時(shí)間
  // isRunning: false,//正在滾動(dòng)
 },
 onLoad: function () {
  var that = this
  //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
  app.getUserInfo(function (userInfo) {
   //更新數(shù)據(jù)
   that.setData({
    userInfo: userInfo,
   })
  })
  wx.getSystemInfo({
   success: function (res) {
    var windowWidth = res.windowWidth * 0.5;
    that.setData({
     //圓點(diǎn)坐標(biāo),x為屏幕一半,y為半徑與margin-top之和,px
     //后面獲取的觸摸坐標(biāo)是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': '投資理財(cái)', 'src': '../images/investment.png' },
    { 'index': 3, 'menu': '現(xiàn)金貸款', 'src': '../images/loan.png' },
    { 'index': 4, 'menu': '特色服務(wù)', 'src': '../images/service.png' },
    { 'index': 5, 'menu': '轉(zhuǎn)賬匯款', 'src': '../images/transfer.png' }
   ]
  }
  // 繪制轉(zhuǎn)盤
  var menuConfig = app.menuConfig.menu,
   len = menuConfig.length,
   menuList = [],
   degNum = 360 / len // 文字旋轉(zhuǎn) 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
  });
 },
 // 菜單拖動(dòng)的三個(gè)方法
 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) {
  //獲取滑動(dòng)時(shí)的時(shí)間
  var downTime = Date.now();
  this.setData({
   downTime: downTime
  })
  var that = this;
  var endPoint = e.touches[e.touches.length - 1]
  //根據(jù)觸摸位置計(jì)算角度
  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
  // 二、三象限，色角度值是負(fù)值 
  {
   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) {
  // 計(jì)算，每秒移動(dòng)的角度 
  var that = this;
  var upTime = Date.now();
  var angleSpeed = this.data.tempAngle * 1000 / (upTime - this.data.downTime);
  if (Math.abs(angleSpeed) < 100) {
   //速度小于100時(shí),停止?jié)L動(dòng)
   return
  } else {
   //速度大于100時(shí),自動(dòng)滾動(dòng)
   if (angleSpeed > 0) {
    if (angleSpeed > 500) angleSpeed = 500
    var animationRun = wx.createAnimation({
     duration: 2000,
     //ease-out結(jié)束時(shí)減速
     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結(jié)束時(shí)減速
     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設(shè)置后,
所以子控件opacity設(shè)置為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注釋補(bǔ)充:

獲取手指抬起時(shí)的角速度

1.獲取角度.借圖說話.

Math.sqrt( x * x + y * y )是斜邊長，乘以 sin a 就是 y 的長度；

獲取a的角度：Math.asin(y / Math.hypot(x, y) ；

[ hypot是x * x + y * y ]

2.根據(jù)角度差計(jì)算角速度

var angleSpeed = this.data.tempAngle * 1000 / (upTime - this.data.downTime);

3.當(dāng)角速度小于100的時(shí)候觸摸滑動(dòng)停止,不自動(dòng)滾動(dòng);大于100時(shí),自動(dòng)滾動(dòng).我這里用動(dòng)畫,有個(gè)問題:很難把握動(dòng)畫持續(xù)時(shí)間和速度的關(guān)系.總感覺不夠流暢.我表示不能忍.

4.分象限的問題.看看代碼就知道了.主要是根據(jù)up時(shí)的觸摸點(diǎn)相對于圓點(diǎn)的X軸差值來計(jì)算.大于0就是一四象限.小于0就是二三象限.

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: