微信小程序下拉选择器-普通选择器picker

最新推荐文章于 2024-09-15 17:41:01 发布
最新推荐文章于 2024-09-15 17:41:01 发布
阅读量2.6k 收藏 17
点赞数
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52869172/article/details/121159255
版权
本文详细介绍了如何在微信小程序中使用picker组件实现选择器功能，通过`.wxml`和`.js`文件的代码示例，展示了如何设置选择器范围、获取选择值以及响应选择变化事件。该教程适合初学者掌握微信小程序的交互元素应用。
摘要由CSDN通过智能技术生成

效果

在这里插入图片描述

.wxml

    <view class="pick">
    <picker mode="selector" range="{{array}}" value="{{index}}" bindchange="bindPickerChange">
      <view>{{array[index]}}</view>
    </picker>
    </view>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

.js

  data: {
    array:['1','2','3','4'],
    index:0
  },
  bindPickerChange:function(e){
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },

具体可参照微信开发文档

不能没有奶茶
关注
微信小程序picker组件下拉框选择input输入框的实例
08-29
主要介绍了微信小程序picker组件下拉框选择input输入框的实例的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下
微信小程序--下拉选择框组件封装,可CV直接使用
m0_74444744的博客
10-12 5396
微信小程序--下拉选择框组件封装,可CV直接使用
微信小程序的多级选择器（multiSelector模式的Picker）如何设计出各列之间的可选项有关联的逻辑？
weixin_41640959的博客
09-15 1443
对于多级选择器，如需实现多级联动，即各列之间的可选项有关联的逻辑，应当使用bindcolumnchange事件，当某列的选择有了变化，无需确认，就对整个多级选择器的可选项进行改变。
微信小程序选择器picker的使用（selector 普通选择器）
m0_52244931的博客
03-10 4434
从底部弹起的滚动选择器。就是类似于element-ui中的下拉选择器。
微信小程序 自定义组件 select下拉选择器
weixin_47284756的博客
04-29 1463
微信小程序 自定义组件 select下拉选择器 首先我们自定义组件需要了解一下微信小程序如何自定义组件 在你的项目文件里新建一个components的文件夹 我这里建立在 pages里了 其实最好建立在和pages同级 然后在components文件夹里新建一个你组件的文件夹和内容 右键创建Component 这样就创建好了 然后我们把相应的代码放进去 wxml代码 <view class='select_box'> <view class='select' catchtap='s
微信小程序-普通下拉选择器picker
这不是我的博客
12-19 2435
需求：从接口获取数据，数据为json，需要实现如下所示的下拉选择 查看官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/picker.html 首先在page/index/index.js中添加定义初始数据： 从接口请求数据： 根据文档视图代码如下： <view class="c-min...
微信小程序 -- 年月日时分秒 picker 选择器
06-28
在微信小程序开发中，UI组件的选择器`picker`是一个常用的功能，它允许用户从一系列选项中进行选择。本文将深入探讨如何实现一个专门用于选择年、月、日、时、分、秒的`picker`组件，以提升用户体验并增强应用程序的...
微信小程序之picker日期和时间选择器
01-19
下面来介绍小picker，分三种样式： 默认的自己可以定义数据的 mode=”time”是时间选择器 mode=”date”是日期选择器 跟其他的一样先来看下picker.wxml <text class=page__title>picker 选择器 <...
微信小程序下拉滚动选择器picker绑定数据的两种方式
03-29
微信小程序下拉滚动选择器picker绑定数据的两种方式 本地数据绑定和wx.request(OBJECT) json数据绑定 (此图片来源于网络，如有侵权，请联系删除! ) 1.本地数据绑定 （对象数组） Page({ data:{ //户型 这是一个...
微信小程序三级联动选择器使用方法
01-19
本文实例为大家分享了微信小程序三级联动选择器的具体代码，供大家参考，具体内容如下 效果图 实现原理 利用微信小程序的picker组件，其中： 1，普通选择器：mode = selector实现一级选择实例； 2，省市区选择器...
微信小程序中下拉选择中带手动输入搜索的实现
02-10
在微信小程序开发中，下拉选择框（Picker）通常用于让用户在一组预设选项中进行选择，而结合手动输入搜索功能则能进一步提升用户体验，使用户可以快速找到想要的特定选项，尤其当选项数量庞大时。本文将详细介绍如何...
微信小程序 select 下拉框组件功能
01-03
一、源码地址 https://github.com/imxiaoer/WeChatMiniSelect 二、效果图 录屏图片质量较差，所以大家会看到残影（捂脸） 三、组件源码 1. select.wxml <view class=select-box> <view class=select-current catchtap=openClose> <text class=current-name>{{current.name}}</text> </view> <view class=option-list wx:if={{isShow}} catchtap
微信小程序筛选插件，下拉筛选插件
04-19
仿美团搜索筛选功能，小程序筛选插件，下拉筛选插件
微信小程序 —— picker 组件， 下拉列表组件
u010669626的博客
02-27 2032
range-key string 当 range 是一个 object array 时， 通过 range-key。value number 0 表示选择了 range 中的第几个（下标从 0 开始)此处只列举 mode = selector 时，selector 是默认属性，不需要设置。除了通用属性，对于不同的 mode, picker 拥有不同的属性。上面的 weui.wxss 是微信官方提供的 UI 库。用这种格式加到项目里。
微信小程序封装vant 下拉框select 多选组件
IT博客技术分享
01-03 5727
微信小程序封装vant 下拉框select 多选组件
微信小程序-自定义下拉框组件
热门推荐
weixin_41635311的博客
09-28 1万+
知识点：组件，animation，获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框，所以只有自定义。自定义的话，可以选择模板的方式，也可以选择组件的方式来创建。 这次我选择了组件，这样只需引入组件和添加数据，其它的不用管，就能实现多个地方重复使用了。 第一步：创建组件所需的文件 我喜欢把共用的内容都放在和pages文件同级的地方，所以有了下面的目录结构   （1） ...
微信小程序下拉菜单
Herry Zhang的博客
08-29 9549
效果如图所示 代码链接：https://github.com/herry-zhang/wxapp-selected
微信小程序封装vant 下拉框select 单选组件
IT博客技术分享
01-03 4096
微信小程序封装vant 下拉框select 单选组件。
微信小程序picker选择器（下拉框）以及传值问题
前端视听
07-02 4487
参考文档： https://developers.weixin.qq.com/miniprogram/dev/component/picker.html wxml <view class="section"> <view class="section__title">普通选择器</view> <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> &l
微信小程序picker选择器 下拉选择
最新发布
09-27
微信小程序的Picker组件是一个下拉选择器，用于让用户从预设的选项列表中选择一个或多个值。它通常包含两个部分：一组标题和一系列可选的项。用户可以点击滚动并选择所需的项目，这个组件常用于设置、筛选等场景。 在小程序的wxml文件中，你可以像这样添加Picker： ```html <view> <picker bindchange="bindPickerChange" value="{{selectedValue}}" range="{{optionsArray}}"> <!-- 'selectedValue' 和 'optionsArray' 需要在js文件中定义 --> <view>请选择</view> </picker> </view> ``` 然后，在对应的js文件中，你需要定义`bindPickerChange`函数来处理选择的变化，并设置`optionsArray`数组，每个元素是一个包含标签名和值的对象，例如： ```javascript Page({ data: { selectedValue: '', optionsArray: ['选项一', '选项二', '选项三'] }, bindPickerChange(e) { // e.detail.value 就是用户选择的值 this.setData({ selectedValue: e.detail.value }); } }) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值