微信小程序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 相关文章推荐
JQuery 常用操作代码
Mar 14 Javascript
浅说js变量
May 25 Javascript
jQuery实现可收缩展开的级联菜单实例代码
Nov 27 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
编写高性能Javascript代码的N条建议
Oct 12 Javascript
Express URL跳转(重定向)的实现方法
Apr 07 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
js实现旋转的星空效果
Nov 01 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 Javascript
浅谈vue.watch的触发条件是什么
Nov 07 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实现框架(二)
2006/10/09 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
JavaScript库 开发规则
2009/01/31 Javascript
关于flash遮盖div浮动层的解决方法
2010/07/17 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
2010/08/01 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
Bootstrap3 内联单选和多选框
2016/12/29 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
基于bootstrap实现多个下拉框同时搜索功能
2017/07/19 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
将python文件打包exe独立运行程序方法详解
2020/02/12 Python
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
秋季运动会广播稿大全
2014/02/17 职场文书
技校毕业生个人学习的自我评价
2014/02/21 职场文书
美术社团活动总结
2014/06/27 职场文书
银行求职自荐信
2014/06/30 职场文书
公司租房协议书范本
2014/10/08 职场文书
基于Python实现对比Exce的工具
2022/04/07 Python