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

最新推荐文章于 2024-01-25 21:41:49 发布

dzp_coder

最新推荐文章于 2024-01-25 21:41:49 发布

阅读量1.8w

点赞数 5

分类专栏：微信小程序微信小程序开发文章标签：微信小程序圆形菜单仿建行圆形菜单

本文链接：https://blog.csdn.net/qq_31383345/article/details/53581226

版权

本文介绍了如何使用微信小程序开发一个圆形菜单，该菜单模仿了建设银行APP的样式。菜单包括一个圆形背景、六个菜单项和用户的头像。文章详细讲述了触摸滚动的实现，包括速度较慢时的直接停止和速度较快时的自动滚动效果。作者还分享了真机截图和相关代码，并指出目前存在的问题：真机运行不畅和滚动卡顿。提供了源码下载链接以供进一步研究。

摘要由CSDN通过智能技术生成

建行APP首页有个圆形菜单.仿了个玩具出来.

功能介绍:
1.一个圆形背景.六个item菜单.中间是微信用户的头像;
2.触摸滚动.速度较小时,随手指滚动,手指抬起,滚动停止;速度较大时,随手指滚动,手指抬起,还会自动滚动一段时间;
CSDN微信小程序开发-专栏,欢迎关注!
相关技术:
1.微信小程序开发之大转盘仿天猫超市抽奖
 2.微信小程序之仿微信漂流瓶
 3.微信小程序开发之视频播放器 Video 弹幕弹幕颜色自定义
 4.微信小程序开发之录音机音频播放动画 (真机可用)
5.微信小程序开发之麦克风动画帧动画放大淡出
上一张真机截图:

上代码:
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 < len; i++) {
      menuList.push({ deg: i * degNum, menu: menuConfig[i].menu, src: menuConfig[i].src });
      console.log("menu:" + menuConfig[i].menu)
    }
    that.setData({
      menuList: