html做app 坑,uniapp之w-picker使用采坑

在uniapp中遇到w-picker组件使用时的问题,包括点击取消和确认按钮无法隐藏组件,以及watch监听在不同平台表现不一致。通过调整w-picker的放置位置解决了隐藏失效的问题,并修改watch监听方式使其兼容H5和微信小程序。解决方案包括将w-picker置于根目录并调整watch监听的方法。
摘要由CSDN通过智能技术生成

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. 隐藏无效

这是标签放置位置不对问题,请放置到根目录,不要和其它组件混用到一起

v-model="formdata.bed" placeholder="床号" />

@confirm="onbedconfirm" ref="bed" themecolor="#f00">

1.2.2. watch问题

改成了如下形式就兼容了h5和小程序,在onload生命周期调用

this.$watch('formdata.hospital',(newvalue,old) => {

this.$refs.bedcom.initbed();

});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp使用uni-data-picker插件可以按照以下步骤进行操作: 1. 首先,引入插件。在代码中添加以下代码: import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js'; [1] 2. 在模板中使用uni-data-picker组件。在template标签中添加以下代码: <uni-data-picker placeholder="请选择级数" v-model="data" :localdata="localdata" @change="changePicker" :step-searh="false" :preload="true"></uni-data-picker> [2] 3. 在data中定义需要的数据。在data函数中添加以下代码: data(){ return{ data: '', localdata: [ { text: '第一一级', value: 6 }, { text: '第一级', value: 1, children: [ { text: '第二级', value: 2 }, { text: '第二二级', value: 3, children: [ { text: '第三级', value: 4 }, { text: '第三三级', value: 5 } ]} ]} ] } } [2] 4. 在mounted方法中获取需要的数据。在mounted方法中添加以下代码: mounted(){ this.getList(); }, methods:{ getList(){ var list = [{name: '张珊', id: 1}, {name: '王五', id: 2}]; this.testList = list; }, //其他方法 } [2] 5. 可选步骤:根据需要,可以添加其他方法,比如test方法和changePicker方法。在methods中添加以下代码: test(){ console.log(this.testList<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [uniapp使用uni-data-picker插件实现省市区弹窗(兼容app)](https://blog.csdn.net/m0_60721514/article/details/123367662)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [uniapp 联级选择器uni-data-picker](https://blog.csdn.net/qq_50563868/article/details/126533589)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值