成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

原創(chuàng)：微信小程序之MaterialDesign--input組件

wudengzan / 2249人閱讀

摘要：作者來(lái)自原文地址主要通過(guò)輸入事件配合的動(dòng)態(tài)改變實(shí)現(xiàn)這種效果。實(shí)際調(diào)試過(guò)程中，組件事件觸發(fā)后回調(diào)的對(duì)象，在模擬器中含有屬性，在真機(jī)中測(cè)過(guò)安卓，沒(méi)測(cè)過(guò)卻沒(méi)有該屬性，最后選擇對(duì)象中的屬性的值的長(zhǎng)度來(lái)同步輸入的位數(shù)。事件最好不要添加改變的代碼。

作者：jeffer 
來(lái)自：原文地址

主要通過(guò)input輸入事件配合css的transform動(dòng)態(tài)改變實(shí)現(xiàn)這種效果。

實(shí)際調(diào)試過(guò)程中，input組件bindinput事件觸發(fā)后回調(diào)的detail對(duì)象，在模擬器中含有cursor屬性，在真機(jī)中（測(cè)過(guò)安卓，ios沒(méi)測(cè)過(guò)）卻沒(méi)有該屬性，最后選擇detail對(duì)象中的value屬性的值的長(zhǎng)度來(lái)同步輸入的位數(shù)。

bindfocus事件最好不要添加改變css的代碼 。

預(yù)覽圖片：

JS：

//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
  data: {
    v_username_border:"", //用戶(hù)輸入框底部border樣式
    v_pwd_border:"",  // 密碼輸入框底部border樣式
    v_float_username:"", // 浮動(dòng)文字字transform 樣式
    v_float_pwd:"",
    num_current_un:0,  // 當(dāng)前輸入的文本位數(shù)
    sp_num_current_un:"", // 當(dāng)前輸入文本位數(shù)超過(guò)限制時(shí)的樣式
    isPwdError:false  // 提交時(shí) 密碼輸入錯(cuò)誤時(shí)的文本提示
  },
  onLoad: function () {
    console.log("onLoad")
  },
  // 用戶(hù)名輸入框獲取焦點(diǎn)時(shí)事件回調(diào)
  usernameFocus:function(e){
    var that = this;
    console.log(e.detail)
  },
  // 用戶(hù)名輸入框輸入時(shí)事件回調(diào)
  usernameInput:function(e){
    console.log(e.detail)
     this.setData({
      v_username_border:"border-bottom:1px solid red",
     num_current_un:e.detail.value.length
    })
    if(e.detail.value.length!=0){
       this.setData({
        v_float_username:"color:red ;transform: translateY(-18.5px)",
        sp_num_current_un:"color:lightseagreen;"
      })
      if(e.detail.value.length>20){
        this.setData({
          sp_num_current_un:"color:orangered;"
        })
      }
    }else{
      this.setData({
        v_float_username:"transform: translateY(0px)",
      })
    }
  },
  // // 用戶(hù)名輸入框失去焦點(diǎn)時(shí)回調(diào)
  usernameBlur:function(e){
    console.log("onBlur")
     this.setData({
      v_username_border:"border-bottom:1px solid grey"
    })
  },
  pwdFocus:function(e){
    console.log("onFocus")
  },
  pwdInput:function(e){
    this.setData({
      v_pwd_border:"border-bottom:1px solid red",
      isPwdError:false
    })
    console.log(e.detail)
    if(e.detail.value.length!=0){
      this.setData({
        v_float_pwd:"color:red ; transform: translateY(-18.5px)",
      })
    }else{
      this.setData({
        v_float_pwd:"transform: translateY(0px)",
      })
    }
  },
   pwdBlur:function(e){
    console.log("onBlur")
     this.setData({
      v_pwd_border:"border-bottom:1px solid grey; "
    })
  },
// 登錄按鈕模擬表單提交  可用form組件代替
  onLogin:function(e){
    this.setData({
      isPwdError:true
    })
  }
})

源碼地址https://github.com/jeffer0323...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81324.html

相關(guān)文章

  • 原創(chuàng)：微信小程序之MaterialDesign--input組件

    摘要：作者來(lái)自原文地址主要通過(guò)輸入事件配合的動(dòng)態(tài)改變實(shí)現(xiàn)這種效果。實(shí)際調(diào)試過(guò)程中，組件事件觸發(fā)后回調(diào)的對(duì)象，在模擬器中含有屬性，在真機(jī)中測(cè)過(guò)安卓，沒(méi)測(cè)過(guò)卻沒(méi)有該屬性，最后選擇對(duì)象中的屬性的值的長(zhǎng)度來(lái)同步輸入的位數(shù)。事件最好不要添加改變的代碼。 作者：jeffer 來(lái)自：原文地址 主要通過(guò)input輸入事件配合css的transform動(dòng)態(tài)改變實(shí)現(xiàn)這種效果。 實(shí)際調(diào)試過(guò)程中，input組件bi...

    ivan_qhz 評(píng)論0 收藏0

  • 如何寫(xiě)一個(gè)微信小程序組件

    摘要：組件三要素組件的三要素就是小程序定義的三種文件因?yàn)楸旧砭褪悄K化開(kāi)發(fā)，所以這天然有利于組件化。日歷組件所以利用和就可以打造一款組件了。這樣就完成了一個(gè)組件編寫(xiě)，任何需要用到的地方都可以引入了。 背景 先談下背景，在做一款產(chǎn)品的時(shí)候需要用到日期選擇器，但是官方的卻不太滿(mǎn)足需求，因?yàn)闊o(wú)法選擇農(nóng)歷啊。所以自己來(lái)造一個(gè)輪子好了，造輪子之前先想想啊，萬(wàn)一以后多個(gè)地方要用到，多個(gè)項(xiàng)目要用，怎么辦呢...

    lijinke666 評(píng)論0 收藏0

  • 微信小程序教學(xué)第三章第三節(jié)（含視頻）：小程序中級(jí)實(shí)戰(zhàn)教程：視圖與數(shù)據(jù)關(guān)聯(lián)

    摘要：因?yàn)檠h(huán)中當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為，當(dāng)前項(xiàng)的變量名默認(rèn)為。包含文章視頻源代碼原創(chuàng)新書(shū)移動(dòng)前端高效開(kāi)發(fā)實(shí)戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開(kāi)售。最新活動(dòng)報(bào)名地址與天天練口語(yǔ)小程序總榜排名第四教育類(lèi)排名第一的研發(fā)團(tuán)隊(duì)，面對(duì)面溝通交流。 § 視圖與數(shù)據(jù)關(guān)聯(lián) 本文配套視頻地址：https://v.qq.com/x/page/z0554... 開(kāi)始前請(qǐng)把 ch3-3 分支中的 code/ 目錄導(dǎo)入微信開(kāi)發(fā)工...

    haitiancoder 評(píng)論0 收藏0

  • 微信小程序教學(xué)第三章第三節(jié)（含視頻）：小程序中級(jí)實(shí)戰(zhàn)教程：視圖與數(shù)據(jù)關(guān)聯(lián)

    摘要：因?yàn)檠h(huán)中當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為，當(dāng)前項(xiàng)的變量名默認(rèn)為。包含文章視頻源代碼原創(chuàng)新書(shū)移動(dòng)前端高效開(kāi)發(fā)實(shí)戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開(kāi)售。最新活動(dòng)報(bào)名地址與天天練口語(yǔ)小程序總榜排名第四教育類(lèi)排名第一的研發(fā)團(tuán)隊(duì)，面對(duì)面溝通交流。 § 視圖與數(shù)據(jù)關(guān)聯(lián) 本文配套視頻地址：https://v.qq.com/x/page/z0554... 開(kāi)始前請(qǐng)把 ch3-3 分支中的 code/ 目錄導(dǎo)入微信開(kāi)發(fā)工...

    scola666 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<