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 },