基于vue实现移动端圆形旋钮插件效果

最近公司有一个项目的需要做出旋钮的效果,旋钮有十个档,根据手指旋转切换,旋转时接近最近的档会有吸附效果,具体效果如下:

html部分代码:

<div class="_touch">
 <div class="round_box" ref="box" @touchstart="touchStart" @touchmove="touchMove">
  <div v-if="able" style="position:absolute;width:100%;height:100%;top:0;left:0;">
   <div class="round_right" ref="right" :style="{ transform: 'rotate(' + angle +'deg)' }">
    <div class="round_info"></div>
   </div>
   <div class="round_num">{{level}}</div>
  </div>
 </div>
</div>

less样式部分代码:

._touch {
 padding-top: 48px;
 .round_box {
  position: relative;
  width: 54%;
  padding-top: 54%;
  margin: 0 auto;
  background-image: url(../../assets/img/round_box.png);
  background-size: auto 100%;
  background-position: center top;
  background-repeat: no-repeat;
  .round_right {
   width: 8%;
   height: 27%;
   position: absolute;
   left: 46%;
   top: 23%;
   transform-origin: 50% 100%;
   -webkit-transform-origin: 50% 100%;
   z-index: 2;
   .round_info {
    background: linear-gradient(#858585, #b3b3b3);
    background: -webkit-gradient(#858585, #b3b3b3);
    background: -moz-linear-gradient(#858585, #b3b3b3);
    width: 100%;
    padding-top: 100%;
    border-radius: 100%;
   }
  }
  .round_num {
   display: inline-block;
   position: absolute;
   z-index: 1;
   text-align: center;
   width: 30%;
   top: 38%;
   left: 35%;
   font-size: 2.4em;
   font-weight: 900;
   background: linear-gradient(#b0b0b0, #c8c8c8);
   background: -webkit-gradient(#b0b0b0, #c8c8c8);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   text-fill-color: transparent;
  }
 }
}

js部分代码:

methods: {
 ......,
 touchStart(e) {
  e.preventDefault();
  e.stopPropagation();
  let round_box = this.$refs.box;
  var w = round_box.offsetWidth / 2;
  var h = round_box.offsetHeight / 2;
  this.px = round_box.getBoundingClientRect().left + w;
  this.py = round_box.getBoundingClientRect().top + h;
 },
 touchMove(e) {
  e.preventDefault();
  e.stopPropagation();
  this.getAngle(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
 },
 touchEnd(e) {
  e.preventDefault();
  e.stopPropagation();
 },
 resetAngle(angle) {
  let list = [
   { angle: 0, level: 5 },
   { angle: 36, level: 6 },
   { angle: 72, level: 7 },
   { angle: 108, level: 8 },
   { angle: 144, level: 9 },
   { angle: 180, level: 10 },
   { angle: 216, level: 1 },
   { angle: 252, level: 2 },
   { angle: 288, level: 3 },
   { angle: 324, level: 4 },
   { angle: 360, level: 5 }
  ];
  let result = list.filter(function(currentVal, index, arr) {
   return Math.abs(angle - currentVal.angle) <= 18;
  });
  this.angle = result[0].angle;
  this.level = result[0].level;
 },
 getAngle(mx, my) {
  var px = this.px;
  var py = this.py;
  var x = Math.abs(px - mx);
  var y = Math.abs(py - my);
  var z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
  var cos = y / z;
  var radina = Math.acos(cos); //用反三角函数求弧度
  var angle = Math.floor(180 / (Math.PI / radina)); //将弧度转换成角度
  if (mx > px && my > py) {
   //鼠标在第四象限
   angle = 180 - angle;
  }
  if (mx == px && my > py) {
   //鼠标在y轴负方向上
   angle = 180;
  }
  if (mx > px && my == py) {
   //鼠标在x轴正方向上
   angle = 90;
  }
  if (mx < px && my > py) {
   //鼠标在第三象限
   angle = 180 + angle;
  }
  if (mx < px && my == py) {
   //鼠标在x轴负方向
   angle = 270;
  }
  if (mx < px && my < py) {
   //鼠标在第二象限
   angle = 360 - angle;
  }
  this.angle = angle;
  this.$nextTick(function() {
   this.resetAngle(this.angle);
  });
 },
......

主要的思路是根据监听 .round_box 元素的 touchmove 事件获取手指相对于圆心这条直线的旋转角度(transform : rotate),

并把旋转角度同步到水平居中于 .round_box 容器,底边框中心与 .round_box重合的元素 : .round_right 上,使它相对于

.round_box的圆心旋转即可。

注:.round_box圆心如下:

注:.round_right 元素如下:

总结

以上所述是小编给大家介绍的基于vue实现移动端圆形旋钮插件效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • vue中实现移动端的scroll滚动方法

    一.首先安装安装 npm install better-scroll --save 二. 并在组件中引用 import BScroll from 'better-scroll' template中引用指向将要滚动的DOM元素 根据官方文档ref属性的说明,我们可以这样将DOM元素引用 三. 在methods中注册_initScroll方法,这个方法是对better-scroll的实例化,并且这个方法将来会在页面DOM结构渲染后被执行 methods: { _initScroll(){ this.

  • 详解vue移动端日期选择组件

    先给大家分享一下源码:https://github.com/lx544690189/vue-mobile-calendar Build Setup # install dependencies npm install # build for production with minification npm run build Usage install npm install vue-mobile-calendar or:(from the dist folder) <script src=&quo

  • vue自定义移动端touch事件之点击、滑动、长按事件

    用法: **HTML** <div id="app" class="box" v-tap="vuetouch" //vuetouch为函数名,如没有参数,可直接写函数名 v-longtap="{fn:vuetouch,name:'长按'}" //如果有参数以对象形式传,fn 为函数名 v-swipeleft="{fn:vuetouch,name:'左滑'}" v-swiperight="{f

  • Vue2.0 实现移动端图片上传功能

    本文主要介绍VUE2.0图片上传功能的实现.原理是通过js控制和input标签的方式完成这一效果,无需加载其他组件. 效果图如下: 1.DOM代码 1.1input标签 由于我们是通过input标签的方式进行图片上传的,但是input标签的样式有点丑,所以我们隐藏该样式display: none <input @change="fileChange($event)" type="file" id="upload_file" multiple

  • 写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab

    前段时间写了一个移动端的自适应滑动Vue导航栏组件,觉得有一定实用性,大家可能会用得到(当然有些大佬自己写得更好的话就没必要啦),于是前两天整理了一下,目前已经发布到npm和GitHub上了,点我到npm,点我到GitHub项目 ,有需要的同学可以在项目中 npm install ly-tab -S 或者 yarn add ly-tab 使用,具体用法下面会讲到. 好了,先看看效果吧 好的,开始废话了,实习差不多3个月了,这段时间跟着导师大佬也有接触过一些项目,也学到了不少东西,接触到的项目基本

  • 基于vue实现移动端圆形旋钮插件效果

    最近公司有一个项目的需要做出旋钮的效果,旋钮有十个档,根据手指旋转切换,旋转时接近最近的档会有吸附效果,具体效果如下: html部分代码: <div class="_touch"> <div class="round_box" ref="box" @touchstart="touchStart" @touchmove="touchMove"> <div v-if="a

  • Mint UI 基于 Vue.js 移动端组件库

    官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引

  • 基于Vue的移动端图片裁剪组件功能

    最近项目上要做一个车牌识别的功能.本来以为很简单,只需要将图片扔给后台就可以了,但是经测试后识别率只有20-40%.因此产品建议拍摄图片后,可以对图片进行拖拽和缩放,然后裁剪车牌部分上传给后台来提高识别率.刚开始的话还是百度了一下看看有没有现成的组件,但是找来找去都没有找到一个合适的,还好这个功能不是很着急,因此自己周末就在家里研究一下. Demo地址:https://vivialex.github.io/demo/imageClipper/index.html 下载地址:https://git

  • 基于zepto的移动端轻量级日期插件--date_picker

    前言 做过移动Web开发的同学都知道,移动端日期选择是很常见的需求.在PC端,我们有很丰富的选择,比较出名的就有Mobiscroll和jQuery UI Datepicker.个人看来,这些插件存在的两个显而易见的问题,第一是过重的依赖,对于jQuery的插件,已经强制依赖了80多k的庞然大物,把很多移动端项目拒之门外:第二是太过强大的功能,很多插件花百分之八十的时间去完善插件百分之二十炫酷的额外功能,导致代码量变大,配置繁杂.所以一款少依赖.轻量级和使用简单的移动端日期选择插件是非常必要的.本

  • vue-image-crop基于Vue的移动端图片裁剪组件示例

    本文介绍了vue-image-crop基于Vue的移动端图片裁剪组件示例,分享给大家,具体如下: 代码地址:https://github.com/jczzq/vue-image-crop vue-image-crop 基于Vue的移动端图片裁剪组件 组件使用URL.createObjectURL()等新特性,使用前注意兼容问题.IE >= 10 注意:该组件适用于 PC 端,不推荐手机端使用. 功能预览 快速开始 安装Node >= 8.9.0(推荐LTS = 8.11.0) # 安装 vue

  • 详解基于vue的服务端渲染框架NUXT

    Nuxt 随着现在vue和react的流行,许多网站都做成了SPA,确实提升了用户体验,但SPA也有两个弱点,就是SEO和首屏渲染速度.为了解决单页应用的痛点,基于vue和react的服务端渲染应运而生.由于公司的框架采用的是vue,所以就简单的研究了一下基于vue的服务端渲染框架--NUXT.在vue的官网有关于服务端渲染的详细介绍,而NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置,也集成了Vue2.vue-router.vuex.vux-meta(管理页面meta信息的),利用

  • 使用Vue实现移动端左滑删除效果附源码

    左滑删除在移动端是很常见的一种操作,常见于删除购物车中的商品,删除收藏夹中文章等等场景.我们只需要手指按住要删除的对象,然后轻轻向左滑动,便会出现删除按钮,然后点击删除按钮即可删除对象. 点击下载源码 今天我给大家介绍的移动端左滑删除效果是基于Vue2实现的,结合以电商平台的删除购物车商品为例,来看实现步骤. 准备 安装vue项目过程已忽略,如果不懂vue的同学可以上官网看下:https://cn.vuejs.org/v2/guide/installation.html#NPM 我们使用安装一个

  • 基于vue实现web端超大数据量表格的卡顿解决

    一.整体思路 1.思路来源 最近工作比较忙好久没写文章了,有一丢丢不知道如何写起了,那就先说说我是为什么要开发本文的组件把.公司有一个定位系统,基本上来说一个定位单位一分钟或者更短就会有一个定位点,这样一天下来就会有很多定位点了,如果表格想要一下子放一天甚至三天的数据,那么数据量将会特别大(可能会到达5万条左右的数据),如果我们显示的列又比较多的话,那么表格的卡顿问题就会很明显了.我们公司web端选择的ui框架是 iview  ,说实话 iview 的其他组件还行,不过表格的话在大量数据面前显得

  • 基于vue实现一个神奇的动态按钮效果

    今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮 首先我们还是要对vue进行配置,在上篇随笔中有相关下载教学. 然后我们要在html页面上搭建三个简易的按钮,颜色分别为紫,绿和蓝(颜色随意)其代码如下: <body> <div id="app"> <p> <button @click="btn_click('pg1')" :style="{background:'rebeccapurple'}&quo

  • 基于javascript实现移动端轮播图效果

    本文实例为大家分享了js实现移动端轮播图效果的具体代码,供大家参考,具体内容如下 插件使用: 1.zepto.js 2.touch.js 实现效果 html部分: <!-- 结构 --> <!-- li*6>a[href=#]>img[src=./images/$.jpg] --> <div class="box"> <ul> <!-- 为了无缝连接,我们在图片这里前后增加了2个图片 --> <li>

随机推荐