uniapp之w-picker使用采坑
uniapp之w-picker使用采坑
老梁
发布于 2019-09-10 18:58:53
发布于 2019-09-10 18:58:53
代码可运行
运行总次数：0
代码可运行
1. uniapp之w-picker使用采坑
1.1. 前言
- 由于我是先在index页面集合了这个组件，发现该文件内容实在太多了，不好维护，所以打算把内容一个个抽成组件，在抽w-picker时，遇到了两个问题
- 点击取消，会调用方法，但不会产生取消隐藏效果，点击确认也一样，确认函数的确调用了，但w-picker就是不隐藏
- watch监听的使用，在uniapp可能有一定局限性，我使用如下形式，在h5可行，在微信小程序连错误都不报，同时也没起到作用
watch:{ 'formData.hospital': (val,oldval) => { debugger this.$refs.bedCom.initBed(); } },
1.2. 解决
1.2.1. 隐藏无效
- 这是 标签放置位置不对问题，请放置到根目录，不要和其它组件混用到一起
<template>
<view class="">
<view class="input-wrapper" @tap="showBed">
<view style="font-size: 24upx;" class="iconfont icon-bingchuang"></view>
<input disabled cursor-spacing="150" name="bed" class="input-row" placeholder-style="color:#828288" type="text"
v-model="formData.bed" placeholder="床号" />
</view>
<w-picker :colData="colData" :current="true" :mode="bedData.mode" @change="bedPickerChange" :defaultVal="bedData.value"
@confirm="onBedConfirm" ref="bed" themeColor="#f00"></w-picker>
</view>
</template>1.2.2. watch问题
- 改成了如下形式就兼容了h5和小程序，在
onLoad生命周期调用
this.$watch('formData.hospital',(newValue,old) => {
this.$refs.bedCom.initBed();
});本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019-07-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
