微信小程序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 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
javascript实现超炫的向上滑行菜单实例
Aug 03 Javascript
详解Vue自定义过滤器的实现
Jan 10 Javascript
Angular多选、全选、批量选择操作实例代码
Mar 10 Javascript
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
javascript头像上传代码实例
Sep 28 Javascript
JS实现移动端双指缩放和旋转方法
Dec 13 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实现递归循环每一个目录
2010/08/08 PHP
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
php中preg_replace正则替换用法分析【一次替换多个值】
2017/01/17 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
jQuery mobile 移动web(6)
2015/12/20 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
2017/01/12 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
2018/07/05 Javascript
layer.confirm取消按钮绑定事件的方法
2018/08/17 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
JS加载解析Markdown文档过程详解
2020/05/19 Javascript
python数据结构树和二叉树简介
2014/04/29 Python
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
TensorFlow模型保存/载入的两种方法
2018/03/08 Python
示例详解Python3 or Python2 两者之间的差异
2018/08/23 Python
python字典一键多值实例代码分享
2019/06/14 Python
10个顶级Python实用库推荐
2021/03/04 Python
波兰在线香水店:Perfumy.pl
2019/08/12 全球购物
《桃花心木》教学反思
2014/02/17 职场文书
期终自我鉴定
2014/02/17 职场文书
群众路线对照检查材料
2014/09/22 职场文书
网站出售协议书范文
2014/10/10 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
MYSQL 的10大经典优化案例场景实战
2021/09/14 MySQL
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫
python读取mat文件生成h5文件的实现
2022/07/15 Python