vant的picker的坑及解决

 更新时间:2022年12月05日 10:11:12   作者:玲珑咖啡  
这篇文章主要介绍了vant的picker的坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vant的picker的坑

<view class="picker" bindtap="goSub">
	{{subjectname}}
	<image class="img" src="../../images/bottom-arrow-pic.png"></image>
	<!-- 年级筛选 -->
	<van-popup show="{{ subShow }}" bind:close="subClose" position="bottom" overlay-style="background:rgba(0,0,0,0.3)">
		<van-picker columns="{{ subColumns }}" bind:cancel="subCancel" bind:confirm="subConfirm" show-toolbar value-key="name"
		 toolbar-class="cancon" />
	</van-popup>
</view>

咋一看上面的代码貌似没有什么问题,但是点击picker出来之后会发现,关闭不了了,无论怎么点都不会关闭弹出层,页面也无报错信息,经过测试发现,组件写错地方了

下面是正确的写法

<view class="picker" bindtap="goSub">
    {{subjectname}}
    <image class="img" src="../../images/bottom-arrow-pic.png"></image>
</view>
<!-- 年级筛选 -->
<van-popup show="{{ subShow }}" bind:close="subClose" position="bottom" overlay-style="background:rgba(0,0,0,0.3)">
    <van-picker columns="{{ subColumns }}" bind:cancel="subCancel" bind:confirm="subConfirm" show-toolbar value-key="name"
     toolbar-class="cancon" />
</van-popup>

看出来不同之处了吧,相比大家都明白为什么了。

vant-picker级联问题

级联时主要注意一级二级之间的联动,需要一个方法处理,其他的跟单列的相同

<div class="content">
    <div @click="openPicker()">{{pickerValue}}</div>
    <van-popover v-model="showPicker" position="bottom">
      <van-picker
        :columns="columns"
        show-toolbar
        :default-index="defaultIndex"
        @confirm="setData"
        @cancel="showPicker = false"
      ></van-picker>
    </van-popover>
  </div>
showPicker:false,
      defaultIndex:0,
      pickerValue0:'浙江',
      pickerValue:'温州',
      columns: [{
        text: '浙江',
        defaultIndex:NaN,
        children: [{
          text: '杭州',
          defaultIndex:NaN
        }, {
          text: '温州',
          defaultIndex:NaN
        }]
      }, {
        text: '福建',
        defaultIndex:NaN,
        children: [{
          text: '福州',
          defaultIndex:NaN
        }, {
          text: '厦门',
          defaultIndex:NaN
        }]
      }]
 openPicker(){
    //  打开筛选框的默认值
     this.columns.map((item,index)=>{
       if(this.pickerValue0===item.text){
         this.defaultIndex = parseInt(index)
         for(let i =0 ;i<item.children.length;i++){
           if(this.pickerValue === item.children[i].text){
             item.defaultIndex = parseInt(i)
           }
         }  
       }
     })
     console.log(this.columns);
     this.showPicker = true
   },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 关于vue中根据用户权限动态添加路由的问题

    关于vue中根据用户权限动态添加路由的问题

    每次路由发生变化时都需要调用一次路由守卫,并且store中的数据会在每次刷新的时候清空,因此需要判断store中是否有添加的动态路由,本文给大家分享vue中根据用户权限动态添加路由的问题,感兴趣的朋友一起看看吧
    2021-11-11
  • Vue 解决路由过渡动画抖动问题(实例详解)

    Vue 解决路由过渡动画抖动问题(实例详解)

    这篇文章主要介绍了Vue 解决路由过渡动画抖动问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • Vue.js添加组件操作示例

    Vue.js添加组件操作示例

    这篇文章主要介绍了Vue.js添加组件操作,结合实例形式分析了vue.js组件的注册、调用相关操作技巧,需要的朋友可以参考下
    2018-06-06
  • 详解Vue2.0里过滤器容易踩到的坑

    详解Vue2.0里过滤器容易踩到的坑

    本篇文章主要介绍了Vue2.0里过滤器容易踩到的坑,vue2.0需要自己定义过滤器。有兴趣的可以了解一下
    2017-06-06
  • Vue.js使用this.$confirm换行显示提示信息实例

    Vue.js使用this.$confirm换行显示提示信息实例

    在编写Web应用时,实现多行文本显示通常需要用到HTML标签或JavaScript特定函数,本文介绍了如何使用JavaScript的$createElement函数来创建多行文本显示,$createElement可以创建任何HTML标签,使得在JavaScript中控制HTML输出更加灵活,通过简单的代码示例
    2024-10-10
  • 详解vue中$nextTick和$forceUpdate的用法

    详解vue中$nextTick和$forceUpdate的用法

    这篇文章主要介绍了详解vue中$nextTick和$forceUpdate的用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • vue实现宫格轮转抽奖

    vue实现宫格轮转抽奖

    这篇文章主要为大家详细介绍了vue实现宫格轮转抽奖,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • ant-design-vue中设置Table每页显示的条目数量方式

    ant-design-vue中设置Table每页显示的条目数量方式

    这篇文章主要介绍了ant-design-vue中设置Table每页显示的条目数量方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue中的封装常用工具类

    vue中的封装常用工具类

    这篇文章主要介绍了vue中的封装常用工具类,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue中的异步组件函数实现代码

    Vue中的异步组件函数实现代码

    这篇文章主要介绍了Vue中的异步组件函数实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07

最新评论