小程序:picker-view选择器快速滚动,确认时,”值显示错误“

简介: 小程序:picker-view选择器快速滚动,确认时,”值显示错误“

一、picker-view简介

嵌入页面的滚动选择器。其中只可放置 picker-view-column组件,其它节点不会显示。

 

二、问题描述:

技术选型:uniapp。

这里做选择的时候,

滑动到某一个角色,点击确定,页面的数据没有更新,停留在之前的一个选项。

三、找到原因:

picker内容还在滚动时或滚动回弹动画还未结束时,

点击确定,关闭弹出的picker,数据无法及时更新,需等待一下,或手动触停滚动再点确定。

四、解决问题:

@pickstart="pickstart" @pickend="pickend"

<view class="w-picker-view" v-if="mode=='selector'">
  <picker-view :indicator-style="itemHeight" @pickstart="pickstart" @pickend="pickend" :value="pickVal" @change="bindChange">
    <picker-view-column>
      <view class="w-picker-item" v-for="(item,index) in data" :key="index">{{item.label}}</view>
    </picker-view-column>
  </picker-view>
</view>
// 定义标记变量 isMoving 
pickstart() {
  this.isMoving = true;
},
pickend() {
  this.isMoving = false;
},
pickerConfirm(e){
  if (this.isMoving) {
    console.log('运动中,不能点击哦')
    return;
  }
}

经过测试问题成功解决。

五、欢迎交流指正,关注我,一起学习。

相关文章
|
6月前
|
小程序 UED 开发者
小程序如何监听页面的滚动事件
小程序如何监听页面的滚动事件
228 0
|
小程序 前端开发 容器
微信小程序隐藏右侧滚动条并可以滚动
微信小程序隐藏右侧滚动条并可以滚动
467 0
|
6月前
|
小程序 JavaScript
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
小程序自定义弹窗禁止底部内容滚动(滚动穿透问题)
923 0
|
小程序
小程序滚动时使标题背景颜色改变
小程序滚动时使标题背景颜色改变
130 0
|
4月前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
85 0
|
4月前
|
存储 小程序 数据库
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
【微信小程序-原生开发】实用教程08 - 开通微信云开发,操作云数据库新增数据(含修改数据权限),初始化云服务(含获取微信云环境 id),获取云数据,滚动公告栏
74 0
|
6月前
|
小程序
微信小程序scroll-view横向滚动和纵向滚动实现(亲测管用)
微信小程序scroll-view横向滚动和纵向滚动实现(亲测管用)
|
JSON 小程序 前端开发
微信小程序picker选择器渲染json数据
微信小程序picker选择器渲染json数据
71 0
|
小程序 开发工具 开发者
微信小程序日期选择器显示当前系统年月日时分
微信小程序日期选择器显示当前系统年月日时分
169 0
|
小程序 JavaScript 前端开发
picker选择器(下拉框)以及传值问题
微信小程序picker选择器(下拉框)以及传值问题
119 0
下一篇
无影云桌面