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

 更新时间:2017年09月20日 10:28:51   作者:今天一点也不冷  
这篇文章主要介绍了微信小程序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}

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

相关文章

  • ElementUI中el-tree如何获取每个节点点击的选中状态

    ElementUI中el-tree如何获取每个节点点击的选中状态

    ElementUI中el-tree获取每个节点点击的选中状态,有时候需要获取el-tree每个节点的点击状态,可以通过以下方式,其中isCheck类型为布尔值,本文结合实例代码介绍ElementUI中el-tree获取每个节点点击的选中状态,感兴趣的朋友一起看看吧
    2023-12-12
  • 老生常谈js中0到底是 true 还是 false

    老生常谈js中0到底是 true 还是 false

    下面小编就为大家带来一篇老生常谈js中0到底是 true 还是 false。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • javascript遍历对象的五种方式实例代码

    javascript遍历对象的五种方式实例代码

    在我们日常工作过程中,我们对于javaScript遍历对象、数组的操作是十分的频繁的,这篇文章主要给大家介绍了关于javascript遍历对象的五种方式,需要的朋友可以参考下
    2021-10-10
  • JavaScript简单表格编辑功能实现方法

    JavaScript简单表格编辑功能实现方法

    这篇文章主要介绍了JavaScript简单表格编辑功能实现方法,涉及javascript操作表格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • javascript实现去除HTML标签的方法

    javascript实现去除HTML标签的方法

    这篇文章主要介绍了javascript实现去除HTML标签的方法,涉及javascript正则替换相关操作技巧,需要的朋友可以参考下
    2016-12-12
  • 微信小程序实现流程进度的图样式功能

    微信小程序实现流程进度的图样式功能

    最近正在做微信小程序,需要实现一个流程进度的图样式,下面小编给大家带来了微信小程序实现流程进度的图样式功能实例代码,需要的朋友参考下吧
    2018-01-01
  • 原生JS实现点击数字小游戏

    原生JS实现点击数字小游戏

    这篇文章主要为大家详细介绍了原生JS实现点击数字小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • 微信小程序按钮点击动画效果的实现

    微信小程序按钮点击动画效果的实现

    这篇文章主要介绍了微信小程序按钮点击动画效果的实现,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 浅谈小程序 setData学问多

    浅谈小程序 setData学问多

    这篇文章主要介绍了浅谈小程序 setData学问多,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • js上传图片及预览功能实例分析

    js上传图片及预览功能实例分析

    这篇文章主要介绍了js上传图片及预览功能,实例分析了javascript操作图片上传预览功能的实现方法,需要的朋友可以参考下
    2015-04-04

最新评论