学习微信小程序的下拉列表控件-picker

devtools/2025/1/17 20:48:52/

1、创建一个空白工程

2、index.wxml中写上picker布局:

<!--index.wxml-->
<view class="container"><picker mode="selector" range="{{array}}" bindchange="bindPickerChange"><view class="picker">当前选择:{{array[index]}}</view></picker>
</view>

3、index.wxss中添加wxml中引入的样式:

/**index.wxss**/
.container {display:flex;flex-direction: column;align-items: center;justify-content: center;height: 100rpx;
}
.picker {padding: 20rpx;border: 1rpx solid #ccc;border-radius: 5rpx;margin-top: 20rpx;
}

4、index.js中添加数据(数组array),和列表选择切换的响应函数:

// index.js
Page({data: {array: ['选项1','选项2','选项3','选项4'],index:0},bindPickerChange(e){console.log(e);this.setData({index:e.detail.value});}
})

5、编译,看效果,o了。

picker绑定对象数组遇到问题:

https://mp.csdn.net/mp_blog/creation/editor/145183341


http://www.ppmy.cn/devtools/151355.html

相关文章

微软与腾讯技术交锋,TRELLIS引领3D生成领域多格式支持新方向

去年 11 月&#xff0c;腾讯推出 Hunyuan3D 生成模型&#xff0c;是业界首个同时支持文字和图像生成 3D 的开源大模型。紧接着不到一个月&#xff0c;微软便发布了全新框架 TRELLIS&#xff0c;加入 3D 资产生成领域的竞争中。TRELLIS 支持多格式输出&#xff0c;包括辐射场、3…

ubuntu22.04:解决google chrome 访问百度页面加载慢的问题

前因&#xff1a;ubuntu22.04系统&#xff0c;本地有两个浏览器&#xff0c;firefox和chrome&#xff0c;firefox无论是使用代理还是不使用代理访问百度网站的速度都十分的快&#xff0c;chrome即使开代理访问百度网站也很慢&#xff0c;但是访问其他网站却很快。 1、在chrome地…

【2024年华为OD机试】(B卷,100分)- 数据分类 (Java JS PythonC/C++)

一、问题描述 题目描述 对一个数据a进行分类&#xff0c;分类方法为&#xff1a; 此数据a&#xff08;四个字节大小&#xff09;的四个字节相加对一个给定的值b取模&#xff0c;如果得到的结果小于一个给定的值c&#xff0c;则数据a为有效类型&#xff0c;其类型为取模的值&…

web程序防止xss攻击和跨域

什么是XSS攻击&#xff1f; xss攻击是指有人恶意编写了一段脚本链接&#xff0c;当用户点击的时候就会向用户所在的服务器发送一个请求&#xff0c;这个请求包含了一段js代码&#xff0c;如果不防止xss那么这段js代码会被执行&#xff0c;这样子后果十分严重&#xff0c;容易被…

Jenkins-简介/安装!

一. 关于持续集成&#xff1a; 持续集成(CI ) [ Continuous Integration ]&#xff0c;通俗来讲&#xff0c;就是一个能监控版本控制系统变化的工具&#xff0c;可以自动编译和测试集成的应用程序。出现问题&#xff0c;能够及时的通知相应人员。持续集成是一种思维工具集&…

【Flink系列】4. Flink运行时架构

4. Flink运行时架构 4.1 系统架构 Flink运行时架构——Standalone会话模式为例 1&#xff09;作业管理器&#xff08;JobManager&#xff09; JobManager是一个Flink集群中任务管理和调度的核心&#xff0c;是控制应用执行的主进程。也就是说&#xff0c;每个应用都应该被…

【Uniapp-Vue3】pages设置页面路径及窗口表现

在pages.json中可以看到创建的页面的信息&#xff1a; 数组中的每一个对象就是一个页面的信息&#xff0c;每个页面的信息设置可以在style中设置&#xff0c;常用的样式设置&#xff1a;

计算机视觉算法实战——实时车辆检测和分类(主页有相关源码)

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​ ​​​​​​​​​​​​​​​​​​ 1. 领域介绍✨✨ 实时车辆检测和分类是计算机视觉中的一个重要应用领域&#xff0c;旨在从视频流或…