微信小程序picker组件下拉框选择input输入框的实例
微信小程序picker组件下拉框选择input输入框的实例
实现效果图:
页面
<view class="row-wrap"> <view class="label">预约项目</view> <picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}"> <view> <text>{{casArray[casIndex]}}</text> </view> </picker> </view> </view> <view class="section {{reply?'on':'off'}}"> <input name="other" placeholder="请输入所预约项目" type="text"/> </view>
js
data: { nickName: "", avatarUrl: "", casArray: ['双眼皮', 'TBM', '隆胸', '减肥', '手动输入'], userName: '', mobile: '', Gender: 'female', casIndex: 0, }, /** * 生命周期函数--监听页面加载 */ bindCasPickerChange: function (e) { console.log('乔丹选的是', this.data.casArray[e.detail.value]) if (e.detail.value == 4) { this.setData({ reply: true }) } else { this.setData({ reply: false }) } this.setData({ casIndex: e.detail.value }) },
添加input框的样式
.section{ font-size:28rpx; margin-left: 50rpx; margin-top: 30rpx; } .on{display: block} .off{display: none}
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
相关推荐
-
微信小程序中input标签详解及简单实例
微信小程序中input标签详解及简单实例 使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的 第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对
-
微信小程序 input表单与redio及下拉列表的使用实例
微信小程序 input表单与redio及下拉列表的使用实例 一个简单的预约类型的表单,效果 主要代码: <form bindsubmit="bindSave"> <view class="form-box"> <view class="row-wrap"> <view class="label">联系人</view> <view class="labe
-
微信小程序 (十七)input 组件详细介绍
input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试 主要属性: wxml <!--style的优先级比class高会覆盖和class相同属性--> <view class="inputView" style="margin-top: 40% "> <input class="input" type="number"
-
微信小程序 input输入框详解及简单实例
微信小程序输入框input 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 微信小程序输入框input 属性名 类型 默认值 说明 value String 输入框的内容 type String text input的类型,
-
微信小程序 input输入及动态设置按钮的实现
微信小程序 input输入及动态设置按钮的实现 [需求]实现当手机号已填写和协议已勾选时,"立即登录"按钮变亮,按钮可点击:若有一个不满足,按钮置灰,不可点击:实现获取短信验证码,倒计时提示操作:对不满足要求内容进行toast弹窗提示. <view class="container"> <!--手机号--> <view class="section"> <text class="txt"
-
微信小程序 input输入框控件详解及实例(多种示例)
微信小程序 input输入框控件 今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需要设置不同样式的输入框,今天的代码中都要相应的使用. 首先主页面中将登录的样式进行了简单展示和使用, 代码如下: <!--index.wxml--> <!--如果在同一个form表单中创建了多个input输入框,可以给给每个输入框,创建自己的 name="userName"属性,可以区别哪个输入框,并通过添
-
微信小程序之MaterialDesign--input组件详解
主要通过input输入事件配合css的transform动态改变实现这种效果. 实际调试过程中,input组件bindinput事件触发后回调的detail对象,在模拟器中含有cursor属性,在真机中(测过安卓,ios没测过)却没有该属性,最后选择detail对象中的value属性的值的长度来同步输入的位数. bindfocus事件最好不要添加改变css的代码 . 预览图片: JS: //index.js //获取应用实例 var app = getApp() Page({ data: { v
-
微信小程序picker组件下拉框选择input输入框的实例
微信小程序picker组件下拉框选择input输入框的实例 实现效果图: 页面 <view class="row-wrap"> <view class="label">预约项目</view> <picker bindchange="bindCasPickerChange" value="{{casIndex1}}" range="{{casArray}}">
-
微信小程序实现select下拉框
实现代码如下: <view class="fenlei"> <!-- 下拉框 --> <view class="select_box"> <view class="select" catchtap="selectTaps"> <text class="select_text">{{selectDatas[inde
-
微信小程序自定义select下拉选项框组件的实现代码
知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件,这样只需引入组件和添加数据,其它的不用管,就能实现多个地方重复使用了. 第一步:创建组件所需的文件 我喜欢把共用的内容都放在和pages文件同级的地方,所以有了下面的目录结构 (1) 先创建一个自定义名字的文件夹,例如我上面的Componet (2) 再创建一个select文件夹,然后:右键这个文件
-
微信小程序自定义select下拉选项框的方法
本文实例为大家分享了微信小程序自定义select下拉选项框的具体代码,供大家参考,具体内容如下 第一步:创建组件所需的文件 第二步:开始配置组件 select.json { "component": true, "usingComponents": { "select": "./select" } } 第三步:自定义组件样式及js select.wxml <view class='com-select
-
微信小程序picker组件两列关联使用方式
在使用微信小程序picker组件时候,可以设置属性 mode = multiSelector 意为多列选择,关联选择,当第一列发生改变时侯,第二列甚至第三列发生相应的改变.但是官方文档上给的只有三列数据关联改变,没有两列改变得,我在写的时候琢磨了很久官方文档,于是写下此篇文档,作为总结. 结构文件 <picker mode="multiSelector" bindchange="PickerChange" bindcolumnchange="Pick
-
微信小程序picker组件简单用法示例【附demo源码下载】
本文实例讲述了微信小程序picker组件简单用法.分享给大家供大家参考,具体如下: picker滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器(mode=selector),时间选择器(mode=time),日期选择器(mode=date),默认是普通选择器. 具体功能说明如下: 普通选择器:mode=selector 属性名 类型 默认值 说明 range Array [] mode为selector时,range有效 value Number 0 mode为selecto
-
微信小程序实现页面下拉刷新和上拉加载功能详解
本文实例讲述了微信小程序实现页面下拉刷新和上拉加载功能.分享给大家供大家参考,具体如下: web手机端或App中经常会有下拉刷新,上拉加载这些功能. 微信小程序中如何实现下拉刷新,上拉加载的功能. 实现思路: 1.监听界面的下拉刷新事件和上拉加载事件 bindscrolltolower 监听上拉加载 bindscrolltoupper 监听下拉刷新 2.下拉刷新时清空数据列表,并重新请求数据进行界面展示. 3.上拉加载增量请求数据,增量增加数据列表,增量界面展示 效果图: 实现代码: Water
-
微信小程序自定义组件之可清除的input组件
最近正在做的一个小程序项目中需要用到一个可清除的输入框控件,为了在项目中使用方便以及方便其他项目直接使用,便封装了一个可清除的input自定义组件. 组件需要达到的需求是:输入框内没有内容时,删除按钮隐藏:当输入框内有内容时,删除按钮显示,点击删除按钮则清空输入框内所有内容.并且还可以设置输入框整体样式以及输入框左侧图标. 明确了需求之后,就可以开始着手实现了. 首先,在目标目录下新建一个自定义组件 建好之后,我们需要来设计布局.根据需求来看,我们只需要三个组件:两个image和一个input.
-
微信小程序 picker 组件详解及简单实例
微信小程序picker 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现效果图: 微信小程序picker 滚动选择器,现支持三种选择器,通过mode来区分,分别是普通选择器,时间选择器,日期选择器,默认是普通选择器 普通选择器:mode=
-
微信小程序本作用域下调用全局JS详解及实例
微信小程序本作用域下调用全局JS详解 本地wxml文件 <view> app版本:{{version}} </view> 本地js文件 var app; Page({ data:{ }, onLoad:function() { app = getApp(); this.setData({version:app.globalData.appName}); } }) 全局js文件 //app.js App({ globalData:{ appName:"hcoder"
随机推荐
- 在Shell命令行处理JSON数据的方法
- json简单介绍
- ExtJs事件机制基本代码模型和流程解析
- asp.net COOKIES需要注意的一点
- php UNIX时间戳用法详解
- python实现字符串和日期相互转换的方法
- python实现超简单端口转发的方法
- javascript Keycode对照表
- jquery实现的弹出层登录和全屏层注册特效代码分享
- javaScript 逻辑运算符使用技巧整理
- C#使用foreach语句遍历集合类型的方法
- java构造函数示例(构造方法)
- Java异常处理之try...catch...语句的使用进阶
- layer.close()关闭进度条和Iframe窗的方法
- docker环境下数据库的备份(postgresql, mysql) 实例代码
- 易语言调用GetUserPassWord.dll获取系统开机密码
- Python实现二叉树的最小深度的两种方法
- pandas使用apply多列生成一列数据的实例
- Springboot项目如何使用apollo配置中心
- Springcloud Config支持本地配置文件的方法示例