微信小程序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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
JS 事件绑定函数代码
Apr 28 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
JavaScript中对象介绍
Dec 31 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
Vue.js在使用中的一些注意知识点
Apr 29 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
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
smarty模板数学运算示例
2016/12/11 PHP
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
2018/07/27 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
使用tensorflow实现线性svm
2018/09/07 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
python 并发编程 阻塞IO模型原理解析
2019/08/20 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
python画环形图的方法
2020/03/25 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
经典导游欢迎词大全
2014/01/16 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
保研推荐信
2014/05/09 职场文书
运动会拉拉队口号
2014/06/09 职场文书
大足石刻导游词
2015/02/02 职场文书
前台接待员岗位职责
2015/04/15 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
外出考察学习心得体会
2016/01/18 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
Win11 BitLocker 驱动器加密
2022/04/19 数码科技