当前位置: 首页 > article >正文

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

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.kler.cn/a/507947.html

相关文章:

  • Dart语言的语法
  • Spring Boot 实战篇(四):实现用户登录与注册功能
  • 【C++】构造函数与析构函数
  • FFmpeg硬件解码
  • Multi-Agent如何设计
  • 我这不需要保留本地修改, 只需要拉取远程更改
  • NC65增加按钮打开其他单据
  • DX12 快速教程(3) —— 画矩形
  • Java 数据结构 队列之双端队列 常用方法 示例代码 及其实现
  • vue+arcgis api for js实现地图经纬网格显示
  • 大模型WebUI:Gradio全解11——Chatbot:融合大模型的多模态聊天机器人(6)
  • Qt 使用共享内存的方式限制程序单一启动
  • 深入内核讲明白Android Binder【二】
  • 【JVM-8】使用 IBM Thread and Monitor Dump Analyzer for Java (TMDA) 分析线程转储
  • 深入了解卷积神经网络(CNN):图像处理与深度学习的革命性技术
  • 修复5.0.0r 64位版本浏览器和一些库找不到的问题
  • Flink (九):DataStream API (六) Process Function
  • 如何在 Google Cloud Shell 中使用 Visual Studio Code (VS Code)?
  • Spring Boot与MyBatis
  • FPGA:Quartus软件与操作系统版本对照表
  • Java 开发常见面试题3
  • ORB-SLAM2源码学习: Frame.cc: cv::Mat Frame::UnprojectStereo将某个特征点反投影到三维世界坐标系中
  • “云计算+中职”:VR虚拟仿真实训室的发展前景
  • VS2022——WPF初始化和控件Nmae虚假报错
  • 在 JIRA 中利用仪表盘功能生成 Bug 相关图表的手册
  • 无人机(Unmanned Aerial Vehicle, UAV)路径规划介绍