uniapp写微信小程序的选择器（类似于select option下拉选择框）

最新推荐文章于 2024-09-15 17:41:01 发布
最新推荐文章于 2024-09-15 17:41:01 发布
阅读量6k 收藏 21
点赞数 3
文章标签： 小程序 vue.js vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Da6668_lei/article/details/108771491
版权

uniapp写微信小程序的选择器（类似于select option下拉选择框）

我是在读了uniapp组件后，运用表单组件picker来进行修改写了一个简易的二十四节气的选择器
首先绑定点击事件## 标题在这里插入图片描述
触发点击事件
在这里插入图片描述
添加选项
在这里插入图片描述
点击大雪
在这里插入图片描述
弹出选择项
在这里插入图片描述
选择其中一项后，弹出携带值，根据携带值做其他样式条件
在这里插入图片描述
根据给定携带值绑定条件，切换图片

在这里插入图片描述

Da6668_lei
关注
微信小程序（组件--表单：滑块、开关、选择器）
weixin_45626442的博客
12-10 808
表单组件 （1）表单组件—slider滑动组件 <!-- 表单组件---slider滑动组件 --> <slider min="10" max="60" show-value="true"></slider> 颜色类属性 滑块属性 拖动事件 <!-- 表单组件---slider滑动组件 --> <!...
微信小程序手写select下拉框
HuLuWa1997的博客
10-08 1171
实现代码如下： <view class="fenlei"> <!-- 下拉框 --> <view class="select_box"> <view class="select" catchtap="selectTaps"> <text class="select_text">{{selectDatas[indexs]}</text> <image class="sel
uniapp 实现下拉选择，输入查询的功能
weixin_50679634的博客
04-26 2015
【代码】uniapp 实现下拉选择，输入查询的功能。
uni-app select下拉选择框
qq_52244923的博客
03-03 3677
uni-app select下拉选择框
微信小程序的多级选择器（multiSelector模式的Picker）如何设计出各列之间的可选项有关联的逻辑？
最新发布
weixin_41640959的博客
09-15 1568
对于多级选择器，如需实现多级联动，即各列之间的可选项有关联的逻辑，应当使用bindcolumnchange事件，当某列的选择有了变化，无需确认，就对整个多级选择器的可选项进行改变。
uni-app实现select标签功能
04-27
在uni-app中实现类似html的select标签功能。选中数据后，会在下面显示出所选的数据，点删除之后，对应的选中状态也清除
uni-app——下拉框多选
Tianxiaoxixi的博客
08-04 9334
uni-app——下拉框多选
uni-app的下拉搜索选择组合框
唯见青山不见君
11-13 6909
uni-app中的下拉搜索选择组合框 superwei-combox 组合框
关于uniapp 小程序的下拉框搜索选择
weixin_47062100的博客
09-26 4635
select选择框 搜索选择和单纯的选择
微信小程序中下拉选择中带手动输入搜索的实现
02-10
在微信小程序开发中，下拉选择框（Picker）通常用于让用户在一组预设选项中进行选择，而结合手动输入搜索功能则能进一步提升用户体验，使用户可以快速找到想要的特定选项，尤其当选项数量庞大时。本文将详细介绍如何...
微信小程序 —— picker 组件， 下拉列表组件
u010669626的博客
02-27 2163
range-key string 当 range 是一个 object array 时， 通过 range-key。value number 0 表示选择了 range 中的第几个（下标从 0 开始)此处只列举 mode = selector 时，selector 是默认属性，不需要设置。除了通用属性，对于不同的 mode, picker 拥有不同的属性。上面的 weui.wxss 是微信官方提供的 UI 库。用这种格式加到项目里。
微信小程序——自定义select选择器
qq_43201350的博客
12-22 2448
wxml文件 <view class='select_box'> <view class="select" catchtap='selectTap'> <view class="select-part"> <text class='select_text'>{{ index !=-1 ? selectData[index] : '选择喜欢的水果'}}</text> <icon iconClass="icon
微信小程序没有select元素
青菜陪白豆腐的博客
07-20 1万+
小白的我又来了，今天遇到了一个很蠢的问题啊，没接触微信小程序多久，有个页面需要用到下拉选项，我顿时想到的是用select元素和option元素，可惜微信小程序不如我意，就是不好使，没办法我上网一个搜索，却发现微信小程序没有这select和option这东西，那它用什么替代的呢。它是用picker这东西来实现的，不过这挺好还不用重新写个样式显示options。黑字白底清清楚楚，很好看。先看看微信小程...
uniapp 可搜索下拉框
nickDaDa的博客
05-29 8096
基于uniapp官方的picker实现（也可以自定义select）。. 查询返回数据集之后先备份成backupData。 增加一个输入框，用来输入要模糊查询的内容。 增加一个“定位”按钮，用于把模糊内容查出来。 增加一个“恢复”按钮，用于还原搜索前的数据。 增加一个函数，支持传入目标数据的对象对应key，通过indexOf > -1的方式把所有符合条件的项都过滤出来，形成一个新的array，用于显示到当前页面。也可以通过传后台，让后台把模糊搜索的数据返回到前端的方式。 增加一个函数，直接把
uniapp搜索下拉框
kepler星球的博客
07-25 4020
搜索下拉框
微信小程序 自定义组件 select下拉选择器
weixin_47284756的博客
04-29 1472
微信小程序 自定义组件 select下拉选择器 首先我们自定义组件需要了解一下微信小程序如何自定义组件 在你的项目文件里新建一个components的文件夹 我这里建立在 pages里了 其实最好建立在和pages同级 然后在components文件夹里新建一个你组件的文件夹和内容 右键创建Component 这样就创建好了 然后我们把相应的代码放进去 wxml代码 <view class='select_box'> <view class='select' catchtap='s
uni-app中select下拉菜单
热门推荐
lsklike的博客
08-17 2万+
uni-app中select下拉菜单
uniapp下拉选择组件
abs625的博客
05-11 5439
uniapp下拉选择框
微信小程序下拉选择框—相当于网页的select
肉丸不肉
08-02 8051
index.html &lt;view class='select_box'&gt; &lt;view class='select' catchtap='selectTap'&gt; &lt;text class='select_text'&gt;{{selectData[index]}}&lt;/text&gt; &lt;image class='s...
uniapp开发微信小程序自定义TabBar指南
资源摘要信息: "uniapp - 微信小程序 - 自定义底部tabbar" 知识点一：uniapp框架简介 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，能够编译到iOS、Android、H5、以及各种小程序等多个平台。它提供了一套...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值