uni-app 第一次进入nvue页面拖动滑块获取到的数据都是null
uni-app 第一次进入nvue页面拖动滑块获取到的数据都是null
项目信息 | 详情 |
---|---|
产品分类 | uniapp/App |
PC开发环境操作系统 | Windows |
PC开发环境操作系统版本号 | 11 |
HBuilderX类型 | 正式 |
HBuilderX版本号 | 4.26 |
手机系统 | Android |
手机系统版本号 | Android 13 |
手机厂商 | OPPO |
手机机型 | oppo |
页面类型 | nvue |
vue版本 | vue2 |
打包方式 | 云端 |
项目创建方式 | HBuilderX |
操作步骤:
app端新增了个nvue页面用来播放视频 使用了强制横屏的api 然后设置了滑块进度条 第一次进入页面拖动滑块触发的方法返回的value都是null 多进几次页面后可以正常获取
预期结果:
正常获取数据
实际结果:
第一次进入获取到的是null
bug描述:
app端新增了个nvue页面用来播放视频 使用了强制横屏的api 然后设置了滑块进度条 第一次进入页面拖动滑块触发的方法返回的value都是null 多进几次页面后可以正常获取
你好,贴一下代码,看一下你是咋用的
style="{width:screenWidth+‘px’,‘height’: (screenHeight0.15)+‘px’,opacity:isShowConsole?1:0}" class=“bottom-box”> <cover-view :style="{width:(screenWidth0.05)+'px',marginLeft:(screenWidth*0.05)+'px'}"> <cover-image @click=“isShowConsole?togglePause($event):’’” src="…/…/static/images/zantin.png" v-if=“isPlay” style=“width: 50rpx;height: 50rpx;” /> <cover-image @click=“isShowConsole?togglePause($event):’’” src="…/…/static/images/kaishi.png" v-else style=“width: 45rpx;height: 45rpx;” /> </cover-view>
style="{marginRight:(screenHeight*0.02)+‘px’,color:’#fff’,fontSize:‘35rpx’}">{{secondsToHms(currentTime)}}</text>
style="{marginLeft:(screenHeight*0.02)+‘px’,color:’#fff’,fontSize:‘35rpx’}">{{secondsToHms(duration)}}</text> </cover-view> </cover-view>
你好 该页面代码已贴出 滑动组件也有用果uniapp原生那个 也是会出现这种null的情况
还会有一种情况就是进度条拉到一般 但是进度条的数值已经达到了最高值 不确定这些问题是不是都是因为横屏之后高度问题导致
你好 请问有找到问题吗
回复 1***@qq.com: 你好,你可以精准定位一下问题吗?或者是提供一个可以直接复现的工程
回复 DCloud_UNI_yuhe: 我把页面代码给您 那你那边直接真机试试可以吗
回复 DCloud_UNI_yuhe: 我尝试了取消横屏 但是也是会发生这个问题 只是概率的程度 测试流程就是真机调试->进入改页面->拖动进度条 反复尝试几次 杀死app进入第一次进入该页面触发概率基本是100%
回复 1***@qq.com: 可以的
回复 DCloud_UNI_yuhe: 已将代码页面私信发送给您
回复 DCloud_UNI_yuhe: 你好 我这个问题有结论吗
请你只提供一下关键的代码,或者提供一下完整的可运行的项目。
已私信提供
你好 有结论嘛 可以复现吗
在uni-app中,nvue页面是基于Weex引擎渲染的,与普通的Vue页面(基于Vue.js引擎)在处理一些事件和数据绑定时可能存在差异。针对你提到的“第一次进入nvue页面拖动滑块获取到的数据都是null”的问题,这通常是由于数据绑定或事件监听没有正确设置导致的。
以下是一个简单的nvue页面示例,展示如何在nvue页面中正确设置滑块(slider)并获取其值:
<template>
<div>
<slider id="mySlider" @changing="onSliderChanging" @change="onSliderChange" :value="sliderValue" min="0" max="100"></slider>
<text>{{sliderValue}}</text>
</div>
</template>
<script>
export default {
data() {
return {
sliderValue: 0 // 初始值
};
},
methods: {
onSliderChanging(e) {
// 滑块拖动过程中触发的事件
console.log('Slider changing:', e.detail.value);
this.sliderValue = e.detail.value; // 更新数据绑定
},
onSliderChange(e) {
// 滑块拖动结束后触发的事件
console.log('Slider changed:', e.detail.value);
this.sliderValue = e.detail.value; // 更新数据绑定,虽然在这里和changing事件中的更新可能是重复的,但为了完整性还是保留
}
}
};
</script>
<style scoped>
/* nvue页面的样式使用flex布局等CSS-like语法 */
div {
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
slider {
width: 80%;
margin-bottom: 20px;
}
text {
font-size: 20px;
}
</style>
在这个示例中,我们定义了一个slider
组件,并通过@changing
和@change
事件监听滑块的拖动和结束拖动事件。onSliderChanging
和onSliderChange
方法会接收到事件对象e
,其中e.detail.value
包含了滑块当前的值。我们将这个值赋给sliderValue
数据属性,并通过数据绑定在页面上显示。
如果你在第一次进入页面时获取到的滑块值是null,请确保:
- 数据属性(如
sliderValue
)已经正确初始化。 - 事件监听器已经正确绑定到滑块组件上。
- 页面加载时没有其他JavaScript错误阻止了事件的正常触发和处理。
如果问题依旧存在,建议检查控制台是否有其他错误信息,或者尝试在真机或模拟器上调试以排除环境差异导致的问题。