微信小程序picker组件下拉框选择input输入框的实例


Posted in Javascript onSeptember 20, 2017

微信小程序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}

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
在Javascript里访问SharePoint列表数据的实现方法
May 22 Javascript
js自动生成对象的属性示例代码
Oct 28 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
Dec 13 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
关于jquery layui弹出层的使用方法
Apr 21 jQuery
vuejs router history 配置到iis的方法
Sep 20 Javascript
浅析JS中什么是自定义react数据验证组件
Oct 19 Javascript
JS数组转字符串实现方法解析
Sep 04 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 #jQuery
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 #Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 #jQuery
Vue-cli创建项目从单页面到多页面的方法
Sep 20 #Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
Sep 20 #Javascript
vue学习笔记之v-if和v-show的区别
Sep 20 #Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 #jQuery
You might like
mysql总结之explain
2012/02/27 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
PHP基于数组实现的分页函数实例
2014/08/20 PHP
Zend Framework过滤器Zend_Filter用法详解
2016/12/09 PHP
jquery等宽输出文字插件使用介绍
2013/09/18 Javascript
简单的ajax连接库分享(不用jquery的ajax)
2014/01/19 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
Python中optparser库用法实例详解
2018/01/26 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
几款好用的python工具库(小结)
2020/10/20 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
测试驱动开发的主要步骤是什么
2014/12/10 面试题
护理学毕业生求职信
2013/11/14 职场文书
鲜花方阵解说词
2014/02/13 职场文书
毕业自我鉴定书
2014/03/24 职场文书
诚信考试承诺书
2014/03/27 职场文书
文明村镇申报材料
2014/05/06 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
实验室的标语
2014/06/20 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书