picker-view踩坑记

最新推荐文章于 2023-05-07 21:09:32 发布
最新推荐文章于 2023-05-07 21:09:32 发布
阅读量661 收藏
点赞数
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/callMeOldWang/article/details/116262216
版权

uniapp picker-view 宽度问题 组件渲染 屏幕适配
关键词由CSDN通过智能技术生成

picker-view picker-view-column 踩坑记

最近使用uniapp开发过程中，遇到了一个坑，这是我的一个picker-view，可以看到，并没有渲染，但其实我数据已经更新了。
在这里插入图片描述
后来经过检查发现
在这里插入图片描述

最外层盒子宽度居然是1920px！！，然后我把他改成375px,就像下面这样了

在这里插入图片描述

我惊呆了

在这里插入图片描述
应该是页面初始化的时候组件默认拿到的是屏幕宽度1920，于是乎我在页面里写了个获取当前屏幕宽度的方法
在这里插入图片描述
在这里插入图片描述

然后问题就轻轻松松解决啦，希望对看到本文的您有帮助！
害，要是爱情也这么简单就好了
在这里插入图片描述

最后我想说一句，js流弊!!!

花は　もう一度咲くの日がある
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app内置组件picker-view和uni-popup的使用注意事项
m0_60605042的博客
06-02 4564
参考说明：uni-app的官方文档在使用bindChange方法时会有延迟，可以加上immediate-change=‘true’立即执行左边的是每列的下标，右边的数字是每列里面的选中的下标。
微信小程序:Picker-View与Picker-View-column的使用
未来的日子
05-08 3201
代码: <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" bindchange="myChange"> <picker-view-column> <view wx:for="{{names}}" wx:key="a" style="line-...
uin-app 在nvue使用picker-view踩得坑
lixu102593的博客
06-19 766
1设置indicatorStyle属性高度有偏差的问题 indicatorStyle: height:80rpx;不能在nvue使用rpx做单位会有误差，只能使用px才行 2设置value值不起作用 把value值从上一个页面带过来赋值给picker-view不起作用，解决方法是判断value值是否有值，使用v-if去控制picker-view的显隐 ...
UIPickerView
dongdong4849的博客
11-19 66
//遵守协议时需要把必须遵守的协议都实现了否则报红 UIPickerViewDelegate,UIPickerViewDataSource 创建PickerView pickerView = UIPickerView() pickerView.delegate = self pickerView.dataSource = self pickerView.selectRow...
picker-view-column高度问题
m0_49139268的博客
05-07 338
写选择器的时候，给picker-view设置了高度，picker-view-column高度没有出来，高度为0。
picker-view无法滚动或滚动后回弹至首项
qq_44242707的博客
09-29 1567
每次需要手动设置picker-view的激活项前都将可选数组清空并取消渲染该组件，使用setTimeout再将原来的可选数组恢复并重新渲染，营造的效果为每次修改时都重新渲染组件，以此规避无法滚动的问题。：表单页面分为只读状态与编辑状态，当从编辑状态转回只读状态时重置picker-view的激活项；后续再返回编辑状态时，表现为picker-view始终固定在首项，滚动后也回弹至首项。：手动设置picker-view的激活项就会导致该问题，深层原因不明，可能是潜在bug。
基于picker-view的日期选择器
最新发布
03-22
基于picker-view的日期选择器，只有年月日选择，uni-app自带的组件不适合利用按钮触发调用，该组件可用在uni-popup里，点击按钮获取
picker-view自定义日期、日期选择.zip
06-07
在微信小程序开发中，`picker-view`组件是一个常用的选择器，可以用于实现用户在预设的选项中进行选择。在创建一个自定义日期选择器时，开发者常常需要处理年、月、日的显示与选择，同时还要考虑到闰年、大小月的...
使用uniapp中picker-view封装底部选择弹框选择器，解决微信小程序中不可自定义样式问题
05-19
使用uniapp制作微信小程序时候，需要一个城市选择框，但是微信中的弹框样式不可自定义，出现了与项目主题样式不一致问题，于是使用uniapp中picker-view封装底部选择弹框选择器，实现支持自定义确定和取消按钮颜色...
微信小程序 picker-view 组件详解及简单实例
01-20
- **picker-view-column 仅可置于 <picker-view /> 中**：子组件 `picker-view-column` 必须作为 `picker-view` 的直接子元素，它们的高度会被自动设置为与 `picker-view` 的选中框高度一致。 ### 3. 示例代码 ...
uniapp中使用微信组件picker-view个人经验总结
exxes的博客
03-17 4902
博主最近在使用uniapp做一个微信小程序，要使用到picker UI组件，原先是使用vant的，但由于在created组件的时候使用云函数异步获取picker内的数据，最终导致展示不了，真的无语，如果是使用本地数据就没问题，于是就去找其他UI，用了很多，各种问题，最终使用了微信原生的组件，可能很多人要问我为什么不使用picker而要用picker-view，是因为。。picker的字体太小了，这微信，上网查也说改不了，于是只能用picker-view，下面进入正文 picker-view的遮罩层 这
微信小程序组件：picker类组件 picker,picker-view,picker-view-column
qq_43132454的博客
05-15 8491
picker picker就是类似上图的滑动选择 picker | 微信开放文档 常用属性 mode, range, bindchange <picker mode="time" range="{{array}}" start="06:30" end="18:30" bindchange="bindTimeChange"> <view class="picker"> 当前选择:{{time}} </view> </pi.
小程序picker-view自定义宽度
坚持原创
09-27 3376
demo.wxml <view class="container"> <picker-view indicator-style="height: 50px;" style="width: 20%; height: 300px;" value="{{value}}" bindchange="bindChange" class="parent"> <pic...
微信小程序开发教程——1.0.9 picker-view组件
qq_43116080的博客
05-02 531
嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示。 属性 类型 默认值 必填 说明 最低版本 value Array. 否 数组中的数字依次表示 picker-view 内的 picker-view-column 选择的第几项（下标从 0 开始），数字大于 picker-view-column 可选项长度时，选择最后一项。 1.0.0 indicator-style string 否 设置选择器中间选中框的样式 1.0.0 indic
picker-view-column自定义picker
坚持原创
09-24 2208
<picker-view style="width:100%;height:200px;" indicator-style="height: 50px;" value="{{value}}"> <picker-view-column> <!-- 注意循环在下面的view里，不是在column中用wx:for --> <view wx:for...
使用uni-app中picker组件遇到的问题
qq_41904125的博客
03-23 3459
<picker :value="dict[dictKey].dictValue" :range-key="dictValue" :range="dict"> <view class="picker"> {{dictKey>-1?dict[dictKey].dictValue}} </view> </picker> 结果： 解...
微信小程序picker-view样式层次踩坑记录
初夏de遐想的博客
01-24 6813
微信小程序picker-view样式踩坑记录picker-view适用范围一个简单的例子样式层次picker-view的stylepicker-view-columnpicker-view的mask-stylepicker-view的indicator-style总结 picker-view适用范围 在小程序的开发中，有些时候需要用到下拉列表，一般情况下直接用微信现成的 picker组件已经可以满...
微信小程序picker组件遇到的问题与解决方案
热门推荐
书写人生
01-17 1万+
一、picker基本概念 当然先看官方文档 picker说明搞清楚基本概念 “从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。” 几个主要属性： range： 选取范围，数据类型为Array / Object Array，mode为 普通选择器 时，range 有效； value： value 的值表示选择了
小程序：picker-view选择器快速滚动，确认时，”值显示错误“
snowball的博客
07-15 2996
点击确定，关闭弹出的picker，数据无法及时更新，需等待一下，或手动触停滚动再点确定。滑动到某一个角色，点击确定，页面的数据没有更新，停留在之前的一个选项。picker内容还在滚动时或滚动回弹动画还未结束时，嵌入页面的滚动选择器。组件，其它节点不会显示。技术选型uniapp。...
<picker-view> <picker-view-column></picker-view-column> </picker-view>
07-14
你使用了 `<picker-view>` 和 `<picker-view-column>` 组件来创建一个滚动选择器。 `<picker-view>` 是滚动选择器的容器，而 `<picker-view-column>` 则定义了滚动选择器的列。 通过以上代码片段，你创建了一个包含一个列的滚动选择器。然而，代码中的 `<picker-view-column>` 组件是空的，需要添加选项供用户选择。以下是一个示例，展示如何为滚动选择器添加选项： ```html <picker-view> <picker-view-column> <view>选项1</view> <view>选项2</view> <view>选项3</view> </picker-view-column> </picker-view> ``` 在上面的代码中，我们在 `<picker-view-column>` 组件内添加了三个 `<view>` 元素作为选项。你可以根据自己的需求添加更多选项。 请注意，滚动选择器可以包含多个列，通过多个 `<picker-view-column>` 来定义。每个 `<picker-view-column>` 组件内可以添加多个选项。 希望这能帮助到你！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值