<template>
<view class="mine-page">
<view class="swipper-wrap" ref="wrapRef" :style="{height:windowHeight+'px',width:windowWidth+'px'}">
<view id="videoWrap" class="items" ref="itemRef" @touchmove='touchmove'>
<view v-for="(i,k) in 5" :key='k' class="video" :style="{height:windowHeight+'px',width:windowWidth+'px',backgroundColor:i%2===0?'red':'blue'}">
<text class="text-name">滑块{{i}}</text>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { ComponentInternalInstance, PropType } from 'vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const BindingX = uni.requireNativePlugin('bindingx');
const wrapRef=ref();
const itemRef=ref();
const { windowHeight, windowWidth } = uni.getSystemInfoSync();
const dataInfo=reactive({
distance:0,
BindingXToken:0,
isInAnimation:false,
startDistance: 20,
backDistance: 200,
minTime: 300,
index: 0,
})
const touchmove=(event)=>{
if (dataInfo.isInAnimation) {
if (dataInfo.BindingXToken != 0) {
BindingX.unbind({
eventType: 'pan',
token: dataInfo.BindingXToken,
});
dataInfo.BindingXToken = 0;
}
return;
}
let touch_origin = `y+${dataInfo.distance}<=0 &&
y+${dataInfo.distance}-${windowHeight}>=${-windowHeight * 5}?
y+${dataInfo.distance} : ${dataInfo.distance}`;
let anchor=wrapRef.value.ref;
let element=itemRef.value.ref;
let gesTokenObj = BindingX.bind({
anchor,
eventType:'pan',
props: [
{element, property:'transform.translateY',expression: touch_origin},
]
}, (e)=>{
if(e.state === 'end'){
console.log('e======',e);
if (Math.abs(e.deltaY) > dataInfo.startDistance) {
console.log('记录Y的位置===',e.deltaY);
const distance = dataInfo.distance + e.deltaY;
if (
distance > 0 ||
dataInfo.distance + e.deltaY - windowHeight < -windowHeight * 5
) {
return;
}
Math.abs(e.deltaY) > 0 && bindTiming(distance, e.deltaY);
}
}
});
dataInfo.BindingXToken = gesTokenObj.token;
}
const bindTiming = (distance, Y) => {
BindingX.unbindAll();
dataInfo.isInAnimation = true;
let element=itemRef.value.ref;
let changed_Y, final_y, translate_y_origin;
final_y = dataInfo.distance + (Y > 0 ? 1 : -1) * windowHeight;
changed_Y = final_y - distance;
translate_y_origin = `easeOutExpo(t,${distance},${changed_Y},300)`;
let result = BindingX.bind(
{
eventType: 'timing',
exitExpression: 't>300',
props: [
{ element, property: 'transform.translateY', expression: translate_y_origin }
],
},
async e => {
if (e.state === 'end' || e.state === 'exit') {
dataInfo.distance = final_y;
dataInfo.isInAnimation = false;
}
}
);
};
</script>
<style lang="scss" scoped>
.swipper-wrap{
overflow: hidden;
}
.video{
justify-content: center;
align-items: center;
}
.text-name{
font-size: 28px;
color: #ffffff;
}
</style>
- 发布:2023-10-30 10:50
- 更新:2023-10-30 10:50
- 阅读:187
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 10
HBuilderX类型: 正式
HBuilderX版本号: 3.8.12
手机系统: Android
手机系统版本号: Android 13
手机厂商: 小米
手机机型: Redmi K60
页面类型: nvue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
新建一个nvue页面,复制示例代码进去即可复现
新建一个nvue页面,复制示例代码进去即可复现
预期结果:
消除误差值
消除误差值
实际结果:
存在滑动误差值
存在滑动误差值
bug描述:
使用bindingx实现全屏滑块动画时,发现动画改变的translateY值存在误差值,随着滑块数量的增多,误差值会一直累积,应该是计算精度的问题,希望官方修复一下