Picker 选择器
WXML 文件中
<view class="container">
<view>
<text>选择器的值: {{pickerValue}}</text>
</view>
<picker mode="selector" range="{{pickerOptions}}" bindchange="pickerChange">
<view class="picker-inner">
{{pickerOptions[pickerIndex]}}
</view>
</picker>
</view>
WXSS 文件中
.container {
margin: 20px;
} .picker-inner {
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid #ccc;
border-radius: 8px;
padding: 10px;
}
js文件中
Page({
data: {
pickerOptions: ['选项1', '选项2', '选项3'],
pickerIndex: 0,
pickerValue: ''
},
pickerChange: function (e) {
var index = e.detail.value;
var value = this.data.pickerOptions[index];
this.setData({
pickerIndex: index,
pickerValue: value
});
}
});
Picker 选择器的更多相关文章
- 小程序循环多个picker选择器,实现动态增、减
现象 循环picker选择器,改变一个下拉框选项,导致全部下拉框选项改变: 问题 怎样操作才能实现只改变当前操作的下拉框的值? 思路 在js中设置一个数组变量,存储每个picker选择器默认的值:然后 ...
- 微信小程序 — 自定义picker选择器弹窗内容+textarea穿透bug
微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都只有定死的样式和内容. 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: 代码如下: < ...
- 记录 vant Picker 选择器,实现三级联动,传对应省市区code值
最近使用vant UI写移动端,感觉还不错 功能挺全的,带的还有省市区三级联动. 但是 突然遇到一个 产品要传的 省市区的code码,还和vant的 邮编不一样,我*****. 看了一下vant UI ...
- 微信小程序开发之picker选择器组件用法
picker组件时一个从底部弹起的可滚动的选择器(嵌入页面滚动器组件picker-view查看https://mp.weixin.qq.com/debug/wxadoc/dev/component/p ...
- 设计和编写一个异步通用Picker选择器,用于时间日期、城市、商品分类的选择
目录 一.功能规划 二.最底层基础实现 (1)Picker界面和功能实现 (2)不同类型的选择器基础实现 三.数据源层 (1)时间日期 (2)多级同步分类,如:城市 (3)多级异步分类,如:城市 四. ...
- React Native组件之Switch和Picker和Slide
React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...
- 移动端效果之Picker
写在前面 接着前面的移动端效果的研究,这次来看看picker选择器的实现原理 移动端效果之Swiper 代码看这里:github 1. 核心解析 1.1 基本HTML结构 <!-- 说明: 1. ...
- iOS学习——UIPickerView的实现年月选择器
最近项目上需要用到一个选择器,选择器中的内容只有年和月,而在iOS系统自带的日期选择器UIDatePicker中却只有四个选项如下,分别是时间(时分秒).日期(年月日).日期+时间(年月日时分)以及倒 ...
- mpvue微信小程序多列选择器用法:实现省份城市选择
前言 微信小程序默认给我们提供了一个省市区的picker选择器,只需将mode设置为region即可 <picker mode="region" bindchange=&qu ...
- React Native控件之Picker
1. import React,{Component}from 'react'; import { AppRegistry, StyleSheet, Text, View, Picker, } fro ...
随机推荐
- Oracle:字符串的拼接、截取、查找、替换
一.拼接:1.使用"||"来拼接字符串: select '拼接'||'字符串' as Str from dual; 2.使用concat(param1,param2)函数实现: s ...
- pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simpleLooking in indexes: https://pypi.tuna.t ...
- 深入解析Go非类型安全指针:技术全解与最佳实践
本文全面深入地探讨了Go非类型安全指针,特别是在Go语言环境下的应用.从基本概念.使用场景,到潜在风险和挑战,文章提供了一系列具体的代码示例和最佳实践.目的是帮助读者在保证代码安全和效率的同时,更加精 ...
- Anaconda虚拟环境配置Python库与Spyder编译器
本文介绍在Anaconda中,为Python的虚拟环境安装第三方库与Spyder等配套软件的方法. 在文章创建Anaconda虚拟Python环境的方法中,我们介绍了在Anaconda环境下, ...
- 如何使用DALL-E 3
如何使用 DALL-E 3:OpenAI 图像生成指南 DALL-E 3 是 OpenAI 图像生成器的高级版本,它可以理解自然语言提示来创建详细图像. 它克服了以前版本的方形图像限制,现在支持各种宽 ...
- 动态规划的状态设计 | bot 讲课の补题
sto james1badcreeper orz. 好厉害的题,但是怎么有人补了三天才补完呢? CF1810G The Maximum Prefix 线性 dp,怎么有 bot 说题目难度在 *240 ...
- 阿里发布AI编码助手:通义灵码,兼容 VS Code、IDEA等主流编程工具
今天是阿里云栖大会的第一天,相信场外的瓜,大家都吃过了.这里就不说了,有兴趣可以看看这里:云栖大会变成相亲现场,最新招婿鄙视链来了... . 这里主要说说阿里还发布了一款AI编码助手,对于我们开发者来 ...
- HTML DOM之二:事件
对事件作出反应 当事件发生时,可以执行 JavaScript,比如当用户点击一个 HTML 元素时. 如需在用户点击某个元素时执行代码,请把 JavaScript 代码添加到 HTML 事件属性中: ...
- The 2021 ICPC Asia Regionals Online Contest (II) L Euler Function
思路来源:Zed222 如果一个区间里的数都有这个质数,那么我们就直接利用性质\(\phi(n * p) = \phi(n) * p\),如果没有这个区间中有没有这个质数的,那么就退化到了单点修改,当 ...
- 玩转开源 |Hugo 的使用实践
Hugo 是一个能够以出色速度构建静态网页的工具,它为我们提供了极具灵活性的平台,可以塑造成符合个人需求的网页.在上一篇博文中已经介绍了 Hugo 的基本搭建步骤,那如何使用 Hugo 搭建符合自己需 ...