微信小程序picker組件下拉框選擇input輸入框的實(shí)例

更新時間：2017年09月20日 10:28:51 作者：今天一點(diǎn)也不冷

這篇文章主要介紹了微信小程序picker組件下拉框選擇input輸入框的實(shí)例的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下

微信小程序picker組件下拉框選擇input輸入框的實(shí)例

實(shí)現(xiàn)效果圖：

頁面

<view class="row-wrap">
     <view class="label">預(yù)約項(xiàng)目</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="請輸入所預(yù)約項(xiàng)目" type="text"/>
  </view>

data: {
  nickName: "",
  avatarUrl: "",
  casArray: ['雙眼皮', 'TBM', '隆胸', '減肥', '手動輸入'],
  userName: '',
  mobile: '',
  Gender: 'female',
  casIndex: 0,
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
  */

 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}

如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

相關(guān)文章

ElementUI中el-tree如何獲取每個節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài)
ElementUI中el-tree獲取每個節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài),有時候需要獲取el-tree每個節(jié)點(diǎn)的點(diǎn)擊狀態(tài),可以通過以下方式,其中isCheck類型為布爾值,本文結(jié)合實(shí)例代碼介紹ElementUI中el-tree獲取每個節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài),感興趣的朋友一起看看吧
2023-12-12
老生常談js中0到底是 true 還是 false
下面小編就為大家?guī)硪黄仙Ｕ刯s中0到底是 true 還是 false。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
javascript遍歷對象的五種方式實(shí)例代碼
在我們?nèi)粘９ぷ鬟^程中,我們對于javaScript遍歷對象、數(shù)組的操作是十分的頻繁的,這篇文章主要給大家介紹了關(guān)于javascript遍歷對象的五種方式,需要的朋友可以參考下
2021-10-10
JavaScript簡單表格編輯功能實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript簡單表格編輯功能實(shí)現(xiàn)方法,涉及javascript操作表格的技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-04-04
javascript實(shí)現(xiàn)去除HTML標(biāo)簽的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)去除HTML標(biāo)簽的方法,涉及javascript正則替換相關(guān)操作技巧,需要的朋友可以參考下
2016-12-12
微信小程序?qū)崿F(xiàn)流程進(jìn)度的圖樣式功能
最近正在做微信小程序，需要實(shí)現(xiàn)一個流程進(jìn)度的圖樣式，下面小編給大家?guī)砹宋⑿判〕绦驅(qū)崿F(xiàn)流程進(jìn)度的圖樣式功能實(shí)例代碼，需要的朋友參考下吧
2018-01-01
原生JS實(shí)現(xiàn)點(diǎn)擊數(shù)字小游戲
這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)點(diǎn)擊數(shù)字小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
微信小程序按鈕點(diǎn)擊動畫效果的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序按鈕點(diǎn)擊動畫效果的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-09-09
淺談小程序 setData學(xué)問多
這篇文章主要介紹了淺談小程序 setData學(xué)問多，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-02-02
js上傳圖片及預(yù)覽功能實(shí)例分析
這篇文章主要介紹了js上傳圖片及預(yù)覽功能,實(shí)例分析了javascript操作圖片上傳預(yù)覽功能的實(shí)現(xiàn)方法,需要的朋友可以參考下
2015-04-04