In diesem Artikel wird haupts?chlich der Beispielcode des vom WeChat-Applet entwickelten CCB-Rundschreibens vorgestellt. Wenn Sie ihn ben?tigen, k?nnen Sie ihn kennenlernen.

Auf der Startseite der CCB-APP gibt es ein kreisf?rmiges Menü. Es sieht aus wie ein Spielzeug

Funktionseinführung:

Ein kreisf?rmiger Hintergrund. In der Mitte befindet sich der Avatar des WeChat-Benutzers. 2. Scrollen Sie mit dem Finger der Finger, und das Scrollen stoppt; wenn die Geschwindigkeit hoch ist, scrollen Sie mit Ihrem Finger, heben Sie Ihren Finger an und es wird automatisch für einen bestimmten Zeitraum gescrollt

Letzter Screenshot des echten Ger?ts:

Obiger Code:

1.index.
js

2.index.w

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: &#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結(jié)束時(shí)減速
     timingFunction: &#39;ease-out&#39;
    })
    that.animationRun = animationRun
    animationRun.rotate(-angleSpeed).step()
    that.setData({
     animationData: animationRun.export(),
    })
   }
  }
 }
})

3.index.

<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>

js

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依然無(wú)效,必須分離開
*/

.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;
}

Ermitteln Sie die Winkelgeschwindigkeit, wenn der Finger wird angehoben

Verwenden Sie Bilder zum Sprechen y * y ) ist die L?nge der Hypotenuse, multipliziert mit sin a ist die L?nge von y

Ermitteln Sie den Winkel von a: Math.asin(y / Math.hypot(x, y) ;

[ Hypot ist x * x + y * y ]

2. Berechnen Sie die Winkelgeschwindigkeit basierend auf der Winkeldifferenz

3. Wenn die Winkelgeschwindigkeit weniger als 100 betr?gt, stoppt der Touch-Slide nicht automatisch. Bei 100 verwende ich hier die

. Aber es gibt ein Problem: Es ist schwierig, den Zusammenhang zwischen Animationsdauer und Geschwindigkeit zu verstehen. Es fühlt sich immer nicht glatt genug an.

Ich hoffe, dass der gesamte Inhalt dieses Artikels für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder Script Home unterstützt.

Das obige ist der detaillierte Inhalt vonWeChat-Applet-Entwicklung, Nachahmung des CCB-Rundmenü-Beispielcodes. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!