uniapp之w-picker使用采坑

发布时间:2019-07-15 22:00:03发布者:Mr.Zhang阅读(630)

1. uniapp之w-picker使用采坑

1.1. 前言

  • 由于我是先在index页面集合了这个组件,发现该文件内容实在太多了,不好维护,所以打算把内容一个个抽成组件,在抽w-picker时,遇到了两个问题

    1. 点击取消,会调用方法,但不会产生取消隐藏效果,点击确认也一样,确认函数的确调用了,但w-picker就是不隐藏
    2. 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();
            });




本文转自博客园,原文地址:https://www.cnblogs.com/sky-chen/p/11190376.html