步骤1:创建uni-app项目并设置基础页面 首先,使用HBuilderX创建一个新的uni-app项目,并新建一个页面,命名为dragPage.vue。 <template> <view class="container" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"> <view class="draggable" :style="{ transform: `translate(${translate...
methods:{startTouch(event){this.startX=event.touches[0].pageX;// 记录触摸起始位置},moveTouch(event){constmoveX=event.touches[0].pageX-this.startX;// 计算移动距离if(moveX>50)this.openSidebar();// 向右滑动超过50px则打开if(moveX<-50)this.closeSidebar();// 向左滑动超过50px则关闭},endTou...
transform: translateX(0) translateY(-100%); } &.down{ transform: translateX(0) translateY(0); } &.left{ transform: translateX(0) translateY(0); } &.right{ transform: translateX(100%) translateY(0); } } 脚本使用 鼠标或手指上下左右滑动页面,调用下面方法进行滑动。 定义数据 // 导入...
transform: translateX(-50%); border-radius: 4rpx; transition: left .3s; background: red; } } scroll-listview 组件源码: <template> <!-- swiper中的transfrom会使fixed失效,此时用height="100%"固定高度; swiper中无法触发mescroll-mixins.js的onPageScroll和onReachBottom方法,只能用mescroll-uni,不...
startX.value = JSON.parse(JSON.stringify(underlineTranslateX.value)) } screenWidth.value = uni.getSystemInfoSync().windowWidth; }); // 滑块位置 const changeTab = (event, index) => { activeTab.value = index; let width = 0; for (let i = 0; i <= index; i++) { ...
.swiper-box{padding:30rpx;font-size:24rpx;}.swiper-section{position:absolute;top:0;left:0;width:100%;height:100%;background:#f99;opacity:0.8;transition:all0.5s;&.up{transform:translateX(0)translateY(-100%);}&.down{transform:translateX(0)translateY(0);}&.left{transform:translateX(0)tr...
translate(x, y); // 设置旋转角度:带负号为逆时针 ctx.rotate(-rotateRad); // 设置文本内容的当前对齐方式 ctx.textAlign = 'center'; // 设置在绘制文本时使用的当前文本基线 ctx.textBaseline = 'Middle'; // 在画布上绘制填色的文本(输出的文本,开始绘制文本的X坐标位置,开始绘制文本的Y坐标位置) ...
translateX:0, active:this.activeIndex, //tab的宽度 tabWidth:0 } }, created(){ this.getWidth() if (this.drawWidth) { let query = uni.createSelectorQuery().in(this); //选择id let that = this; query.select('.tab-box').boundingClientRect(function(rect) { ...
disableTranslateBoolean否false是否禁止平移 disableCtrlBoolean否false是否禁止裁剪框调整 boundDetectBoolean否false是否开启边界探测,开启后,图片会被限制在裁剪框内 freeBoundDetectBoolean否false旋转时开启边界探测,默认旋转不会进行边界探测 keepRatioBoolean否false是否固定裁剪框比例 ...
-1 : deltaX < 0 ? 1 : 0; directionY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0; // 未移动 if (moved === false) { // scrollStart 滚动开始 } // 开始移动 moved = true; // 改变位置 this.translate(newX, newY); // 设置数据 if (timestamp - startTime > 300) { start...