微信小程序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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
Mar 25 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 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
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
PHP Cookie的使用教程详解
2013/06/03 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
对比PHP对MySQL的缓冲查询和无缓冲查询
2016/07/01 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
2017/11/23 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
微信小程序设置滚动条过程详解
2019/07/25 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
Django实现跨域请求过程详解
2019/07/25 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
HTML5 video视频字幕的使用和制作方法
2018/05/03 HTML / CSS
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
制药工程专业毕业生推荐信
2013/12/24 职场文书
演讲稿怎么写
2014/01/07 职场文书
简历上的自我评价
2014/02/03 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
预防艾滋病宣传标语
2014/06/25 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
创业项目(超低成本创业项目)
2019/08/16 职场文书
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫