当前位置： 移动技术网 > IT编程>网页制作>Html5 > uniapp之w-picker使用采坑

uniapp之w-picker使用采坑

2019年07月16日  | 移动技术网IT编程  | 我要评论

溥熙来最新消息,台州电视台节目表,今日钢坯价格

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();
            });

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网