zoukankan      html  css  js  c++  java
  • 开发中的坑(持续更新)

    1、更改vant ui轮播方向

    yarn add vue-directive-touch

    <van-swipe ref="swipeInfo" v-touch:up="onSwipeLeft" v-touch:down="onSwipeRight" class="my-swipe" :initial-swipe="current" indicator-color="white" :show-indicators="false"
                       @change="onChange">
    
    单击: v-touch:tap
    长按: v-touch:long
    左滑: v-touch:left
    右滑: v-touch:right
    上滑: v-touch:up
    下滑: v-touch:down
          onSwipeLeft(){
            this.$refs.swipeInfo.next()
          },
          onSwipeRight(){
            this.$refs.swipeInfo.prev()
          }

     2、关于引用第三方的js

    方法1:放入 static/utils  在index.html里面引用

    方法2:放到 src/utils 目录下,然后在main.js引用

    import * as touchs from './utils/touch.min'
    
    Vue.prototype.$touchs=touchs

    使用的地方

    let target = document.querySelector('.perspective')
    this.$touchs.touch.on(target, 'swipeleft swiperight', function(ev){
            console.log("you have done", ev.type);
    });

     获取移动端缩放倍数

      let target = document.querySelector('.div');
    
      target.style.webkitTransition = 'all ease 0.05s';
      touch.on(target, 'touchstart', function(ev){
      });
    
      let initialScale = 1;
      let currentScale;
    
      touch.on(target, 'pinchend', function(ev){
        currentScale = ev.scale - 1;
        currentScale = initialScale + currentScale;
        // currentScale = currentScale > 1.2 ? 1.2 : currentScale;
        currentScale = currentScale < 1 ? 1 : currentScale;
        // this.style.webkitTransform = 'scale(' + currentScale + ')';
        console.log("当前缩放比例为:" + currentScale);
      });
      touch.on(target, 'pinchend', function(ev){
        initialScale = currentScale;
      });

    3、在使用three.js raycaster时  怎么避免透过上层div选择到物体

    在  Raycaster 点击事件中增加下面判断

    if (!(e.target instanceof HTMLCanvasElement)) {
           return
    }

     4、增加div水印层,透过div点击下面的元素

    pointer-events:none

     5、tooltip被遮挡

            tooltip: {
              trigger: 'axis',
              position: function(point, params, dom, rect, size) {
                dom.style.transform = 'translateZ(0)'
              },
              // 跟随鼠标,不跑出div
              confine: true
            },
  • 相关阅读:
    阅读书籍推荐
    lvarchar类型对表结构变更影响
    离职总结 | 如何做个好员工?
    Windows7 general operation/cmd notes
    (转)CONST用法
    Linux多线程的使用一:互斥锁
    hadoop2.5.2学习及实践笔记(六)—— Hadoop文件系统及其java接口
    hadoop2.5.2学习及实践笔记(五)—— HDFS shell命令行常见操作
    hadoop2.5.2学习及实践笔记(四)—— namenode启动过程源码概览
    hadoop2.5.2学习及实践笔记(三)—— HDFS概念及体系结构
  • 原文地址:https://www.cnblogs.com/ronle/p/12772689.html
Copyright © 2011-2022 走看看