本文實例講述了微信小程序bindinput與bindsubmit的區(qū)別。分享給大家供大家參考,具體如下:
創(chuàng)新互聯(lián)建站2013年開創(chuàng)至今,先為府谷等服務建站,府谷等地企業(yè),進行企業(yè)商務咨詢服務。為府谷企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
實際上的話,bindinput還有bindsubmit是沒有任何的可比性的,但是兩者還是常常被人一起比較,為啥?
比如一個簡單的搜索框,你是愿意選擇使用bindinput還是使用bindsubmit?,雖然一個是表單,一個是文本輸入框,但是兩者都有一個共同點,就是可以去獲取到用戶的輸入信息。這個時候,問題來了,區(qū)別在哪兒?
最簡單的一段代碼在下面:
<form bindsubmit='input1input'> <input name="input1" placeholder='這個是輸入框' style='border:1rpx solid #000;'></input> <button form-type="submit">提交按鈕</button> </form> <input bindinput='input2input' placeholder='這個是輸入框' style='margin-top:200rpx;border:1rpx solid #000;'></input> <button>提交按鈕</button>
// pages/input/input.js Page({ data: { input1: "", input2: "" }, input1input: function (e) { console.log(e); console.log(e.detail.value.input1) }, input2input: function (e) { console.log(e); console.log(e.detail.value); } })
甚是簡單,那么問題來了,區(qū)別在哪兒?
當然,暫時的區(qū)別只有一個,就是console.log
比較多,哈哈,開玩笑的。根據(jù)深圳那邊客戶的反應,說是使用input的時候,移動光標到一個地方后,輸入一個文字,會重新移動光標的尾部,當然,不是上面的那些代碼了,上面的代碼是沒問題的
有問題的是下面的代碼:
// pages/input/input.js Page({ data: { input1: "this is the value for input1", input2: "this is the value for input2" }, input1input: function (e) { console.log(e); console.log(e.detail.value.input1); this.setData({ input1: e.detail.value.input1 }) }, input2input: function (e) { console.log(e); console.log(e.detail.value); this.setData({ input2: e.detail.value }) } })
<form bindsubmit='input1input'> <input value='{{input1}}' name="input1" placeholder='這個是輸入框' style='border:1rpx solid #000;height:100rpx;'></input> <button form-type="submit">提交按鈕</button> </form> <input value="{{input2}}" bindinput='input2input' placeholder='這個是輸入框' style='height:100rpx;margin-top:200rpx;border:1rpx solid #000;'></input> <button>提交按鈕</button>
其實原因很簡單,就在一個地方,就是刷新界面的this.setData
這而,為啥?因為你刷新后,value值修改,然后呢?
然后頁面就刷新了,再然后呢?再然后就是因為你設置的是光標自動移動到最后一步,所以,最好的話是使用input的時候要小心點咯,當然我不是說使用input沒有使用submit好,只是適應場景不同而已,比如沒必要使用bindinput的時候去刷新界面,或則說我個人比較偏愛使用bindsbmit吧,。
希望本文所述對大家微信小程序開發(fā)有所幫助。
分享題目:微信小程序bindinput與bindsubmit的區(qū)別實例分析
URL鏈接:http://muchs.cn/article8/gecoip.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站排名、商城網(wǎng)站、虛擬主機、全網(wǎng)營銷推廣、電子商務、
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)