钉钉小程序picker组件不弹窗

已于 2023-07-26 10:44:05 修改
阅读量788 收藏
点赞数
文章标签： 钉钉 小程序
于 2023-07-26 10:21:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yang19960804/article/details/131933103
版权
文章讲述了在uniapp开发钉钉小程序时遇到picker组件不弹窗的两种情况及解决方案。一种是picker内部需有初始值，否则不会弹窗；另一种是picker组件内应仅包含一个view标签，否则也会导致无法弹窗。
摘要由CSDN通过智能技术生成

钉钉小程序picker组件不弹窗

问题：利用uniapp开发钉钉小程序时候点击下拉选择框没有弹窗弹起，代码和效果图如下图
图上图所示图片描述
上图所示，运用了uniapp的picker标签，同事写的代码picker里是input标签，看到有提示说picker里只支持写view标签，我给写上去后发现还是不行，查阅资料发现原因是picker里面的初始内容不能为空，可以设置为自己想要的提示语字段，然后选择切换后再显示为想要显示的内容，正确代码如下
解决办法：
在这里插入图片描述

在这里插入图片描述
然后点击就可以显示弹窗了，一句话总结就是picker标签内的初始值不能为空，否则弹窗是不会起作用的

我还发现了另外一种情况也引起picker不进行弹窗，代码图下图所示，我这是一个时间选择器事件，写了if判断语句，没有时间的情况就显示请选择，有时间显示选择的时间，但是点击picker弹窗不会弹起
在这里插入图片描述
解决办法：
在这里插入图片描述
我在这两个判断语句外部又加了一个view标签，保证picker组件里只有一个view标签，然后问题就解决了，如果有我这样类似的情况可以按照我说的方法试试看
在这里插入图片描述
这种情况就是picker里只支持包含一个view标签，否则也是不会弹窗的

阿怪的怪
关注
小程序开发之组件picker（选择器）
M.Siebel
01-15 2561
picker 从底部弹起的滚动选择器，现支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。 普通选择器：mode = selector 多列选择器：mode = multiSelector 时间选择器：mode = time 日期选择器：mode = date fields 有效值： 省市区选择器：mode = re...
uniapp用picker日期选择器不是从底部弹起
weixin_48156583的博客
11-08 2191
uniapp用picker日期选择器不是从底部弹起,我是在app里使用的，直接复制uni官方文档的代码，运行效果如下。fields="month" //选择器显示是年月。fields="day" //选择器显示是年月日。fields="year" //选择器显示是年。在app端调用的是os的原生日期选择控件。其实文档里有写，怪自己使用时没仔细看。所以想要从底部弹起的效果，需要配置fields参数。，fields可选值如下。
f2 柱状图滚动 钉钉小程序_钉钉小程序picker组件的range能否加变量-问答-阿里云开发者社区-阿里云...
weixin_30851261的博客
12-31 168
众所周知，钉钉小程序picker组件的range为一个数组 但是在我的项目中需要循环增加多个picker，而且每个新增加的picker的值是不一样的，我最初想到的是在range中的数组名称后面加一个变量来区分不同的数据，但是测试时报错“Uncaught TypeError: n.map is not a function” 如图：工程项目、套数、塔段、塔节都是用的picker，ranger都用的是...
swift-QTimePicker-钉钉日期选择器
08-15
QTimePicker -钉钉日期选择器
uniapp小程序中picker点击不弹窗的原因
qq_28030029的博客
08-29 6819
最近遇到一个很坑的情况。uniapp中用picker的时候，安卓、iOS、H5端都没问题，小程序端就不弹出选择器，后来发现是因为我picker中的view中的值是‘’，所以不弹窗。 <picker class="picker-type" @change="bindTypeChange" :value="chooseIndex" :range="activityType" range-key="name"> <view class="choose-typ...
钉钉小程序时间选择框（微信小程序通用）
weixin_45087036的博客
12-27 5368
time.axml <view class="page-section" a:if="{{prickShow}}"> <view class="page-section-demo"> <picker-view value="{{value}}" onChange="onChange" class="my-picker"> ...
详解钉钉小程序组件之自定义模态框（弹窗封装实现）
12-28
开发钉钉小程序中需要用到模态框 文档里也没有 自己搞一个… 效果大概长这个样 点击指定按钮，弹出模态框，里面的内容可以自定义，可以是简单的文字提示，也可以输入框等复杂布局。操作完点击取消或确定关闭。 开始...
使用uni-app开发微信小程序
qq_34474585的博客
12-16 2673
文章目录1.uni-app框架介绍2.布置开发环境3.理论基础3.1开发规范3.2目录结构3.3组件3.4 常用API4.开发实践4.1页面相关4.1.1页面生命周期4.1.2创建页面4.1.3修改页面样式、功能4.1.4页面跳转4.2组件相关4.2.1组件生命周期4.2.2创建和使用组件4.2.3组件间通信5.小程序发布 1.uni-app框架介绍 uni-app 是一个使用 Vue.js 开发...
5、钉钉平台
小伙伴的博客
04-08 3231
文章目录 文章目录应用管理运行环境应用类型编程模式风神工作台基础应用信息接口权限应用发布钉钉集成参数设置钉钉接口地址常量钉钉集成登录钉钉事件回调接口注册通讯录事件回调群会话事件回调签到事件回调审批事件回调日志管理签到事件回调审批事件回调日志管理 应用管理 钉钉端开发小程序/微应用，实现钉钉与LCP平台的深度集成 运行环境 当前存在两套钉钉环境 环境名称 适用范围 描述 备注 风神测...
微信小程序入门笔记（一）
tian_98的博客
12-25 3237
day 01 1.微信公众平台 https://mp.weixin.qq.com/ 品牌，营销 1.1微信公众平台概念 微信公众平台，简称公众号。曾命名为“官号平台”、“媒体平台”、微信公众号，最终定位为“公众平台”，无疑让我们看到一个微信对后续更大的期望。 利用公众账号平台进行自媒体活动，简单来说就是进行一对多的媒体性行为活动，如商家通过申请公众微信服务号通过二次开发展示商家微官网、微会员、微推送、微支付、微活动、微报名、微分享、微名片等，已经形成了一种主流的线上线下微信互动营销方式。 1.2微信公众
微信小程序学习指南
weixin_30446197的博客
12-13 3453
作者：初雪链接：https://www.zhihu.com/question/50907897/answer/128494332来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 微信小程序正式公测， 张小龙全面阐述小程序，定档1月9日上线（附90分钟演讲全文） ... 前言：新人第一坑，跳坑指南：修改后，必须保存；ctrl+S； 1：官方工具：http...
jquery.datetimepicker控件不弹出的问题
最新发布
凉拌糖醋鱼
06-09 678
在使用datetimepicker过程中，按照官方文档中给出的在script标签中直接使用选择器及datetimepicker()方法，会导致日期选择控件无法正常弹出，需要将其放入入口函数$(function(){...}中方可正常使用。
钉钉小程序时间选择组件
weixin_43930421的博客
06-10 1753
虽然钉钉小程序自带了时间选择 api。但是这个功能所展示的 ui 界面在 ios 和安卓系统上并不一致。而且在 ios 上日期是一行行去滑动的，导致选择跨年或跨月日期就要滑动很久。基于以上2点考虑，决定自己开发组件，以满足功能需求。效果图如下。因为系统全局引入了 colorUI，所以在组件中也用到了相关样式，引入参考： https://blog.csdn.net/weixin_43930421/article/details/124748879在 components 文件目录下新建 tmSelect 组件
uni-app编译成钉钉小程序，uViewUI组件样式失效，自定义组件样式失效
weixin_45081743的博客
06-21 3311
uni-app编译成钉钉小程序，uViewUI组件样式失效，自定义组件样式 公司项目需要把原本用uinapp开发的微信小程序想要在钉钉上也能使用，然后就打算用uniapp编译成钉钉小程序，看看是否有坑，不试不知道，一试吓一跳，官方没有提供钉钉的编译方式，按照网上文章的配置编译成钉钉小程序后，初步发现，uView-ui的icon没啦，然后样式和布局都奇奇怪怪的，排查的很久...(直接跳过)，最终定位到原因，组件上的类名是有的，acss文件也是有的，acss文件里面的样式没有在标签上生效，也就是空白的，如下图。
钉钉小程序和微信小程序的使用区别：picker
weixin_43930421的博客
06-09 1929
微信小程序组件的丰富和完善程度要远远高于钉钉小程序。这里说说这两个小程序中 picker 组件的区别。微信的 picker 组件通过 mode 参数可以设置为多种选择器类型。对于不同的mode，picker拥有不同的属性。相比之下，钉钉的 picker 选择器就单调的可怜。它没有 mode 去设置各种选择器，只能够设置为单列的选择器。日期、时间选择器虽然钉钉小程序不能通过 picker 直接设置日期和时间选择器，但是可以通过开放的接口 dd.datePicker 去打开日期选择列表。 这里需要注意的是最好在
【小程序】基于picker-view组件 封装一个时间选择器（年月日时分秒）
the_old_boy的博客
05-21 6101
一、背景 最近不是到5.20了嘛，本来想做一个记录恋爱时长的小程序来玩玩。开始的恋爱的时间输入嘛，我想着用个时间选择器吧，但一看小程序官方给的picker组件的时间选择仅支持精确到日，或者日期和时间分开。想想能不能做个连在一起，精确到年月日时分秒的时间选择器。需求来了，做一个能选择年月日的时分秒的选择器。官方提供的picker-view我看了demo阅览发现还挺合适，因为我也不需要像picker那...
【小程序】钉钉小程序键盘弹起遮挡以及ios提示不可见
不忘初心，坚定道路！
05-24 641
复现 有个弹窗，弹窗是fixed定位，从底部出现，类似于半弹窗那种，弹窗中会有个输入框，此时在输入框中输入，手机键盘弹起，整个弹窗被上移手机键盘高度，而不是应该聚焦输入框位置。这个情况只有部分手机出现（主要在安卓），并不是所有手机都这样。 ios在弹出提示的时候，提示不可见。安卓正常。 原因 第一个问题是弹窗的高度单位写的rem所导致。 第二个问题是因为ios的加载，提示用的是全局唯一的组件，如果在提示前后同步产生了加载动画，就会导致提示不可见。 解决 第一个问题将弹窗改为vh或者px即可。 第二
uni-app点击选项弹框消失问题
weixin_45747986的博客
06-05 2652
在点击选项后,如果页面会隐藏,可以在子元素上加入事件修饰符,停止事件冒泡,只让点击蒙层后弹框消失 <!-- 菜单弹框start --> <view :class="['tan',{hidden:ishid}]" @click="hidden"> <view class="tan_right" @click.stop> .stop:vue中的事件修饰符,停止事件冒泡 这样点击选项,弹框不会隐藏,点蒙层才会隐藏 ...
微信小程序picker自定义下拉框弹窗样式
05-17
微信小程序中的Picker组件是一个内置的下拉框控件，它提供了一些默认样式和功能。如果需要自定义下拉框弹窗的样式，可以使用自定义组件实现。 以下是一个示例代码，演示如何使用自定义组件实现自定义下拉框弹窗样式： 1. 在小程序根目录下创建一个名为 "custom-picker" 的自定义组件文件夹，并在该文件夹下创建一个名为 "custom-picker.wxml" 的模板文件。 2. 在 custom-picker.wxml 文件中编写下拉框弹窗的结构和样式，例如： ```html <view class="picker-container"> <view class="header"> <text class="cancel" bindtap="onCancel">取消</text> <text class="title">{{title}}</text> <text class="confirm" bindtap="onConfirm">确定</text> </view> <picker class="picker" value="{{value}}" range="{{range}}" bindchange="onChange"></picker> </view> ``` 3. 在 custom-picker.js 文件中编写自定义组件的逻辑，例如： ```javascript Component({ properties: { title: String, value: Number, range: Array }, methods: { onCancel: function() { this.triggerEvent('cancel'); }, onConfirm: function() { this.triggerEvent('confirm', { value: this.data.value }); }, onChange: function(e) { this.setData({ value: e.detail.value }); } } }); ``` 4. 在使用该自定义组件的页面中，引入该组件并传入相应的属性，例如： ```html <custom-picker title="请选择" value="{{index}}" range="{{range}}" bind:cancel="onPickerCancel" bind:confirm="onPickerConfirm"></custom-picker> ``` 5. 在页面的 js 文件中编写相应的逻辑，例如： ```javascript Page({ data: { range: ['选项一', '选项二', '选项三'], index: 0 }, onPickerCancel: function() { // 取消选择 }, onPickerConfirm: function(e) { const value = e.detail.value; // 确认选择 } }); ``` 通过以上步骤，就可以实现自定义下拉框弹窗的样式和功能。需要注意的是，自定义组件的样式和逻辑都需要自行编写。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值