WeChat mini-program development-example code of the circular menu of the similar Construction Bank

This article mainly introduces the sample code of the circular menu of CCB for mini-program development. it has some reference value and can be understood if necessary. This article mainly introduces the sample code of the circular menu of CCB for mini-program development. it has some reference value and can be understood if necessary.

The home page of the ccb app has a circular menu, which is similar to a toy.

Var app = getApp () Page ({data: {userInfo :{}, menuList :{}, // menu set animationData :{}, startPoint :{}, // touch start dotPoint :{}, // point coordinate startAngle: 0, // start angle tempAngle: 0, // move angle downTime: 0, // Press time upTime: 0, // Lift Time // isRunning: false, // rolling}, onLoad: function () {var that = this // call the method of the application instance to obtain the global data app. getUserInfo (function (userInfo) {// update the data that. setData ({userInfo: userInfo,}) wx. getSystemInfo ({succe Ss: function (res) {var restart wwidth = res. required wwidth * 0.5; that. setData ({// dot coordinate, x is half of the screen, y is the sum of the radius and margin-top, and px // The touch coordinate obtained after is px, so px is used directly here. dotPoint: {clientX: javaswwidth, clientY: 250 }}) }}, onReady: function (e) {var that = this; app. menuConfig = {menu: [{'index': 0, 'menu ': 'My Account', 'src ':'.. /images/account.png '}, {'index': 1, 'menu': 'Credit card ', 'src ':'.. /images/card.png '}, {'index ': 2. 'menu ': 'Investment and wealth management', 'src ':'.. /images/investment.png '}, {'index': 3, 'menu': 'Cash loan', 'src ':'.. /images/loan.png '}, {'index': 4, 'menu': 'special service', 'src ':'.. /images/service.png '}, {'index': 5, 'menu': 'remittance transfer ', 'src ':'.. /images/transfer.png '}]} // draw the turntable var menuConfig = app. menuConfig. menu, len = menuConfig. length, menuList = [], degNum = 360/len // text rotation turn value 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}) ;}, // three methods of menu dragging 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 start Angle = Math. asin (y/Math. hypot (x, y) * 180/Math. PI; this. setData ({startAngle: startAngle})}, buttonMove: function (e) {// get the time when sliding var downTime = Date. now (); this. setData ({downTime: downTime}) var that = this; var endPoint = e. touches [e. touches. length-1] // calculate the angle var x = endPoint based on the touch position. clientX-this. data. dotPoint. clientX; var y = endPoint. clientY-this. data. dotPoint. clientY; var moveAn Gle = 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; // if it is a quadrant, the end angle-start angle is used directly, if (quadrant = 1 | quadrant = 4) {tempAngle + = moveAngle-this. data. startAngle;} else // Two or three Image limits. the color angle value is negative {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}) // reset start angle 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) {// calculation, angle of movement per second var that = this; var upTime = Date. now (); var angleSpeed = this. data. tempAngle * 1000/(upTime-this. data. downTime); if (Math. abs (angleSpeed) <100) {// when the speed is less than 100, stop rolling return} else {// when the speed is greater than 100, automatically scroll if (angleSpeed> 0) {if (angleSpeed> 500) angleSpeed = 500 var animationRun = wx. createAnimation ({duration: 2000, // slow-out: 'Slow-out'}) that. 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, // slow-out: 'Slow-out'}) that. animationRun = animationRun. rotate (-angleSpeed ). step () that. setData ({animationData: animationRun. export (),})}}}})

2. index. wxml

  
    
     
      
        
          
          
         
          
      
       {{item.menu}}
          
        
      
    
  
 

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: # limit cab ;}. userinfo-avatar {width: 70px; height: 70px; border-radius: 50%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}/** the transparency of the child control is equal to that of the parent control * the transparency of the child control. after the opacity of the parent control is set, the opacity of the child control is set to 1, must be separated */. 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 */. 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 comments:

Obtains the angular velocity when the finger is lifted.

4. quadrant problems. you can see the code. it is mainly calculated based on the x-axis difference between the touch point and the dot during the up operation. a value greater than 0 is a quadrant. if the value is smaller than 0, it is the limit of two or three images.

The above is all the content of this article. I hope it will be helpful to everyone's learning, and I hope you can support your own home.

The above is the details of the sample code of the CCB circular menu for mini-program development. For more information, see other related articles in the first PHP community!