Vant Weapp组件踩坑:picker的初始赋值解决


Posted in Javascript onNovember 12, 2020

在使用vant的picker组件时,我希望有在页面加载时向数据库获取值来设置picker的默认值。开始我使用官方文档中的default-index属性,并在onLoad方法中进行this.setData()。但是这样做picker的默认索引还是0。

于是我又将setData放入onShow()、onReady()方法,均不奏效。(我真的不知道为什么,新建一个空白页面测试也是这样)

继而我查看官方文档,发现picker有实例方法setIndexes(),于是尝试。

然而我在onLoad()、onReady()方法中通过selectComponent()后再调用方法,还是不奏效。

只有在onReady方法中才可以这样设置索引

wxml:

<van-picker class="picker1" columns="{{columns}}" bind:change="onChange" />

js:(获取到的数据为this.data.index)

onReady(){
 const picker = this.selectComponent('.picker1') //获取组件实例
 picker.setIndexes([this.data.index]) //setIndexes()中的参数是一个数组
}

补充知识:项目总结之关于vue中使用mint-ui的mt-popup出现滚动穿透问题的解决总结

说实话,使用Mint-ui这个ui组件的过程中遇到了很多问题,这个ui组件问题真多。先说今天的主题吧,我在使用popup选择框的时候和datepicker时间选择器的时候出现了滚动穿透的问题,特别是在ios上面。

找了好多方法,最后同事给出了一个好的方法,很简洁,于是就想着总结下来。

防止滚动穿透 只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件就可以了,native是关键,这个表示根元素的意思,也就是body或者html

代码如下:

Popup组件:

<mt-popup
     v-model="popupVisible"
     position="bottom">
     ...
  </mt-popup>
  // 防止滚动穿透 只需加入@touchmove.native.stop.prevent 阻止默认根元素的默认事件就可以了native是关键,这个表示根元素的意思,也就是body或者html
  <mt-popup
   v-model="popupVisible"
   position="bottom"
   @touchmove.native.stop.prevent>
   ...
  </mt-popup>

注意当 mt-popup中还有div等子元素的时候,一定要注意,这个时候可能会有一些问题,会出现mt-popup这个元素也滚动不了的情况,所以说如果mt-popup本身不需要滚动的话,加了@touchmove.native.stop.prevent,底部页面就不会跟着滑动,如果mt-popup里面有滚动条需要滚动的话,可能就滚动不了,这个时候需要采取常规方法了,如下:

// 解决方式,通过监听popupVisible变量,在弹窗出现后禁止body节点touchMove事件,弹窗消失后恢复body节点的touchMove事件

//html 如下
   <mt-popup
     v-model="popupVisible"
     position="bottom">
     ...
   </mt-popup>
// js 如下
  const handler = function(e) {
    e.preventDefault();
  }
  
  // vue实例内
  watch: {
    popupVisible: function (val) {
     if(val) {
       document.getElementsByTagName('body')[0].addEventListener('touchmove', this.handler, { passive: false });
     } else {
       document.getElementsByTagName('body')[0].removeEventListener('touchmove', this.handler, { passive: false });
     }
    }
  }

Datetime Picker:

<mt-datetime-picker
    ref="picker"
    type="time"
    v-model="pickerValue"
    @touchmove.native.stop.prevent>
 </mt-datetime-picker>

对于时间组件加了@touchmove.native.stop.prevent,选择时间滚动的时候底部页面就不会跟着滚动了,很完美。

@touchmove.native.stop.prevent可以使我们省好多事,用起来吧!

以上这篇Vant Weapp组件踩坑:picker的初始赋值解决就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript eval和JSON之间的联系
Dec 31 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
IE与FireFox中的childNodes区别
Oct 20 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
Feb 25 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
vue 图片裁剪上传组件的实现
Nov 12 #Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 #Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 #Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 #Javascript
vant 中van-list的用法说明
Nov 11 #Javascript
让Vue响应Map或Set的变化操作
Nov 11 #Javascript
vue项目中使用rem,在入口文件添加内容操作
Nov 11 #Javascript
You might like
php 中文和编码判断代码
2010/05/16 PHP
PHP5函数小全(分享)
2013/06/06 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
做网页的一些技巧
2007/02/01 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
JS对文本框值的判断示例
2014/03/10 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
JavaScript入门基础
2015/08/12 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
jQuery Ajax全解析
2017/02/13 Javascript
jQuery实现火车票买票城市选择切换功能
2017/09/15 jQuery
vue插槽slot的理解和使用方法
2019/04/03 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
2019/06/25 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
2019/09/25 Javascript
Python中几种导入模块的方式总结
2017/04/27 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
python之随机数函数的实现示例
2020/12/30 Python
python生成word合同的实例方法
2021/01/12 Python
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
通息工程毕业生自荐信
2013/10/16 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
开展批评与自我批评发言材料
2014/05/15 职场文书
师德师风自查材料
2014/10/14 职场文书
2016教师党员学习心得体会
2016/01/21 职场文书
创业计划书之酒厂
2019/10/14 职场文书
FFmpeg视频处理入门教程(新手必看)
2022/01/22 杂记