집 >위챗 애플릿 >미니 프로그램 개발 >WeChat 애플릿 개발 원형 메뉴(CCB 원형 메뉴 모방)

WeChat 애플릿 개발 원형 메뉴(CCB 원형 메뉴 모방)

不言원래의: 2018-06-27 09:22:233039검색

이 글에서는 주로 WeChat 애플릿에서 개발한 원형 메뉴를 소개합니다. 이는 중국 건설은행의 원형 메뉴를 모방한 예입니다. 필요한 경우 학습할 수 있습니다.

CCB APP 홈페이지에 원형 메뉴가 있습니다.

기능 소개:

1. 가운데에는 의 아바타가 있습니다.

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: [
    { &#39;index&#39;: 0, &#39;menu&#39;: &#39;我的账户&#39;, &#39;src&#39;: &#39;../images/account.png&#39; },
    { &#39;index&#39;: 1, &#39;menu&#39;: &#39;信用卡&#39;, &#39;src&#39;: &#39;../images/card.png&#39; },
    { &#39;index&#39;: 2, &#39;menu&#39;: &#39;投资理财&#39;, &#39;src&#39;: &#39;../images/investment.png&#39; },
    { &#39;index&#39;: 3, &#39;menu&#39;: &#39;现金贷款&#39;, &#39;src&#39;: &#39;../images/loan.png&#39; },
    { &#39;index&#39;: 4, &#39;menu&#39;: &#39;特色服务&#39;, &#39;src&#39;: &#39;../images/service.png&#39; },
    { &#39;index&#39;: 5, &#39;menu&#39;: &#39;转账汇款&#39;, &#39;src&#39;: &#39;../images/transfer.png&#39; }
   ]
  }
  // 绘制转盘
  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: &#39;ease-out&#39;
    })
    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: &#39;ease-out&#39;
    })
    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.wxs s

page {
 background-image: url(&#39;http://ac-ejx0nsfy.clouddn.com/ac767407f474e1c3970a.jpg&#39;);
 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 is x * x + y * y ]

2 .각도 차이에 따라 각속도를 계산합니다

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

3. 100보다 작으면 터치 슬라이드가 멈추고 자동으로 스크롤되지 않고 100보다 크면 자동으로 스크롤됩니다. 여기서는 애니메이션을 사용하지만 문제가 있습니다. 지속 시간과 속도의 관계를 파악하기가 어렵습니다. . 항상 부드럽지 않은 느낌이 듭니다.

4. 사분면으로 나누는 문제는 주로 터치의 X축 차이를 기반으로 합니다. 0보다 크면 1사분면과 4사분면이고, 0보다 작으면 2사분면과 3사분면입니다.

위는 전체 내용입니다. 이 글이 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용을 보시려면 PHP 중국어 웹사이트

WeChat 애플릿 개발 원형 메뉴(CCB 원형 메뉴 모방)

관련 기사