精华内容
下载资源
问答
  • vue移动端项目中有一个需求是图片双击放大,在网上查了好多,都是说用 @dblclick="Ondblclick",结果发现在pc端,安卓微信端确实有效,但是ios和chrome device中事件不触发。今天突然发现了vue的手势插件:vue-touch...

    vue移动端项目中有一个需求是图片双击放大,在网上查了好多,都是说用 @dblclick="Ondblclick",结果发现在pc端,安卓微信端确实有效,但是ios和chrome device中事件不触发。今天突然发现了vue的手势插件:vue-touch,可以自定义双击事件,在ios和chrome亲测有效。

    注意: vue1.0可以直接使用vue-touch,但是vue2.0要安装:vue-touch@next。具体步骤如下:

    1.下载vue-touch:npm install vue-touch@next

    2.在mian.js中导入:import VueTouch from 'vue-touch'

    3.自定义双击事件:

    VueTouch.registerCustomEvent('doubletap', {

      type: 'tap',

      taps: 2

    })

    4.在vue中引用:Vue.use(VueTouch, {name: 'v-touch'})

    5.在组件(页面)中使用:<v-touch v-on:doubletap="Ondouble"></v-touch>

    6.js中:methods: {

    Ondouble(){

    console.log("双击")

    }

    }

    展开全文
  • 一,找到vue中的index.html文件 1.把之前的原有的 <meta name='viewport' content='width=device-width,initial-scale=1.0'> 2.替换成现在的 <meta content="width=device-width, initial-scale=1.0, ...

    一,找到vue中的index.html文件

    1.把之前的原有的

    <meta name='viewport' content='width=device-width,initial-scale=1.0'>
    

    2.替换成现在的

     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    
    展开全文
  • vue移动端自适应

    千次阅读 多人点赞 2021-04-22 20:36:45
    1、vue ui创建项目 2、选择基本配置项 3、运行项目 4、新建rem.js文件 // 基准大小 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。...

    1、vue ui创建项目
    在这里插入图片描述
    2、选择基本配置项
    在这里插入图片描述
    3、运行项目
    在这里插入图片描述
    4、新建rem.js文件

    // 基准大小
    const baseSize = 32
    // 设置 rem 函数
    function setRem () {
      // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
      const scale = document.documentElement.clientWidth / 750
      // 设置页面根节点字体大小
      document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
    }
    // 初始化
    setRem()
    // 改变窗口大小时重新设置rem
    window.onresize = function () {
      setRem()
    }
    
    

    在这里插入图片描述
    5、在main.js中引入

    import './utils/rem'
    

    在这里插入图片描述
    6、安装postcss-pxtorem 自动转换px为rem

    npm install postcss-pxtorem -D
    

    在这里插入图片描述
    7、新建 .postcssrc.js文件

    module.exports = {
      "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        // to edit target browsers: use "browserslist" field in package.json
        "autoprefixer": {},
        "postcss-pxtorem": {
          "rootValue": 32,
          "propList": ["*"]
        }
      }
    }
    
    

    在这里插入图片描述
    8、继续运行报错
    在这里插入图片描述
    9、新建vue.config.js文件(解决第八步报错 )

    module.exports = { 
      //双击index.html文件直接运行
      publicPath: './',
      // 当运行 vue-cli-service build 时生成的生产环境构建文件的目录
      outputDir: 'dist',
      lintOnSave: true,
      // 是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
      runtimeCompiler: true,
      // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾
      productionSourceMap: false,
      configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置...
          return {
    
          }
        } else {
          return {
    
          }
        }
      },
      css: {
        extract: true, // 开启 CSS source maps?
        sourceMap: false, // css预设器配置项
        modules: false,
        loaderOptions: {
          postcss: {
            plugins: [
              require('postcss-pxtorem')({
                rootValue: 37.5, // 换算的基数
                selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项
                propList: ['*']
              })
            ]
          }
        }
      },
    
      // webpack-dev-server 相关配置
      devServer: { // 设置代理
        hot: true, // 热加载
        host: '0.0.0.0', // ip地址
        port: 8082, // 端口
        https: false, // false关闭https,true为开启
        open: true, // 自动打开浏览器
        overlay: {
          warnings: false,
          errors: false
        }
      }
    }
    
    

    在这里插入图片描述

    10、自动适配完成
    在这里插入图片描述

    展开全文
  • Vue 移动端的长按与触摸事件 文章目录Vue 移动端的长按与触摸事件说明实现代码演示优化体验 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,...

    Vue 移动端的长按与触摸事件

    博客说明

    文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!

    说明

    在手机端的需求难免会遇到与手势相关的,比如div的长按和单击事件,长按可能是分享或者删除等操作,一般的形式是通过弹窗来展现。

    实现

    其实主要是利用dom的触摸事件,touchstart,touchmove,touchend

    代码

    <template>
      <div>
        <div class="btn-long" @touchstart="handlerTouchstart" @touchmove="handlerTouchmove" @touchend="handlerTouchend">长按我</div>
        <div v-if="clickShow">单击</div>
        <div v-if="longClickShow">双击</div>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'LongTouch',
      data () {
        return {
          // 定时器
          loop: 0,
          clickShow: false,
          longClickShow: false
        }
      },
      methods: {
        handlerTouchstart () {
          this.loop = setTimeout(() => {
            this.loop = 0
            // 执行长按要执行的内容
            this.clickShow = false
            this.longClickShow = true
          }, 500) // 定时的时间
          return false
        },
        handlerTouchmove () {
          // 清除定时器
          clearTimeout(this.loop)
          this.loop = 0
        },
        handlerTouchend () {
          // 清除定时器
          clearTimeout(this.loop)
          if (this.loop !== 0) {
            // 单击操作
            this.clickShow = true
            this.longClickShow = false
          }
        }
      }
    }
    </script>
    
    <style scoped>
    
    .btn-long {
      width: 200px;
      height: 30px;
      background-color: red;
    }
    </style>
    
    

    演示

    image-20210811175110960

    发现在长按时,会出现选中文字的效果,这比较影响体验。

    优化体验

    在css中加入样式,这样就不会出现选中的效果了。

    * {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    

    感谢

    万能的网络

    以及勤劳的自己,个人博客GitHub测试GitHub

    公众号-归子莫,小程序-小归博客

    展开全文
  • 一分钟将Vue移动端项目一键打包成app

    万次阅读 多人点赞 2020-10-07 10:47:29
    vue项目开发完成后,我们就可以把项目打包成一个手机app,是不是很神奇,而且是一键生成,不需要操作。 1,把vue项目打包成dist目录 我们先将项目目录下config文件内index.js中 assetsPublicPath修改为 ...
  • vue移动端video禁止快进 参考文章:https://blog.csdn.net/qq_37300451/article/details/80852684 参考上文做出功能后,发现视频在暂停后,再次播放时,不是从上次暂停的位置开始播放,后来折腾了一天,发现不是代码...
  • vue移动端开发笔记

    2019-08-10 18:29:22
    移动端开发 多页面应用特点 页面跳转,返回html 优点:首屏时间快,搜索引擎效果好 缺点:页面切换慢 单页面应用特点(vue) 页面跳转,js渲染 优点:页面切换快 缺点:首屏时间稍慢,搜索引擎(SEO)优化效果差 服务器端渲染...
  • ##vue移动端去哪儿旅游网 说明: 1、该项目是对移动端去哪儿网的仿写,实现了从首页、城市选择、详情页面,是一个前后端分离的开源目,实现了前端内容的编写。 2、主要技术栈:Vue+Vue-router+Vuex++Axios+stylus+...
  • vue 移动端Fastclick使用

    2021-10-24 18:00:03
    因为移动端浏览器点击事件有一个300ms的延迟 ,为了响应用户的双击行为,为了能够立即响应用户的点击事件,使用fastclick解决 解决方式 解决方式 禁用缩放 <meta name = "viewport" content="user-scalable=no...
  • 安卓: ... <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, ...在 src / app.vue 中 script 标签内添加代码。 <s
  • 解决方案是在vue项目中使用fastclick 安装 npm install fastclick -S 在main.js中引入,并绑定到body。 import FastClick from ‘fastclick’ FastClick.attach(document.body);
  • 移动端设备浏览器会默认在用户点击屏幕大约延迟300ms后才会触发点击事件,这是为了检查用户是否执行的是双击事件。为了能够立即响应用户的点击事件,才有了FastClick。 二.用法 全局安装fastclick: npm i fastclick...
  • VUE移动端禁止双手放大缩小

    千次阅读 2019-04-26 10:32:54
    在index.html里替换 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  • 可能是你使用了better-scroll,默认它会阻止touch事件。所以在配置中需要加上click: true 例: import BScroll from 'better-scroll' mounted() { this.scroll = new BScroll(this.$refs.search, {mouseWheel: true...
  • 那就不是DOM元素的问题,那有没有可能是vue框架的问题? 偶然间发现,我之前一直在浏览器里是用手机模拟模式调试,如果用网页点击就能触发!!!如果打开手机模拟,就没有效果 之后查看点击事件,有没有可能是事件...
  • vue移动端300毫秒延时

    2017-05-17 18:49:00
    引入,在main.js里 import FastClick from 'fastclick' FastClick.attach(document.body); 双击事件另行封装 转载于:https://www.cnblogs.com/liuhuanwen/p/6869096.html
  • 在近期的一个移动端项目中,有一个页面需要有弹框提示,并且这个弹框通过关闭按钮关闭。页面当中使用了 iScroll 来实现页面局部滚动,在 iScroll 的配置当中把tap和click事件都开启了。代码如下: this.myScroll ...
  • npm install --save vue-awesome-mui 2.在main.js中引用 import Mui from 'vue-awesome-mui' Vue.use(Mui) 3.在根目录中的index.html页面中添加实现方法: <script type="text/javascript"> mui.
  • 操作图片拖拽、缩放、长按 下载 ... import AlloyFingerPlugin from 'alloyfinger/vue/alloy_finger_vue' Vue.use(AlloyFingerPlugin,{ AlloyFinger }) 使用 <div v-finger:pinch="p
  • 移动端设备浏览器会默认在用户点击屏幕大约延迟300ms后才会触发点击事件,这是为了检查用户是否执行的是双击事件。为了能够立即响应用户的点击事件,才有了FastClick。 二.用法 全局安装fastclick: npm i ...
  • vue打包后生成的dist目录文件下下面有index.html 打开里面 把原来的这个 <meta name=viewport content="width=device-width,initial-scale=1">   替换成这个就行了 <meta content="width=...
  • 在开发微信端时,发现在Android下面,click事件非常的流畅,...这是为了系统判断用户是双击还是单击屏幕。 vue项目中,可以通过引入fastclick第三方依赖包来解决。 1、安装fastclick依赖: npm install fastclic...
  • ** 1、FastClick(其意义是检查用户是否在做双击事件) ** 因为移动端设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,而FastClick能够立即响应用户的点击事件。(这里的点击穿透事件可以...
  • 移动端页面打包成app 1、使用 HBuilder 直接编译打包 点击左上角 文件》打开目录》选择目录 选择用Webpack打包好的dist文件目录 由于我添加到项目了,所以会显示该项目名称已存在,请重新输入。 2、接着...
  • 是因为我在这个项目种使用了 FastClick ,它的作用是解决移动端延迟300毫秒的问题。   当使用FastClick 时,在ios上点击输入框,调取手机自带输入键盘不灵敏,有时候甚至点不出来。而安卓上完全没问题。这个原因...
  • 实战Vue:基于Vue移动端购物商城

    千次阅读 多人点赞 2020-11-27 16:16:14
    基于Vue移动端购物商城

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 883
精华内容 353
关键字:

vue移动端双击

vue 订阅