聲明在前囊嘉，我是做iOS開發(fā)的温技，最近在研究小程序，對HTML了解的也是相當(dāng)?shù)纳倥ち唬阅愣亩媪郏鲂〕绦蚍磻?yīng)就稍慢點(diǎn)，不過我在學(xué)啊O(∩_∩)O哈哈~琢蛤。根據(jù)官方的小程序簡易教程按著流程一步一步的做還是很好入門的蜓堕，大家有興趣的可以試一下抛虏，保證不是騙人的。
在使用的過程中套才，我遇到了一個(gè)問題：input標(biāo)簽可以設(shè)置鍵盤的confirm鍵的名字叫“下一項(xiàng)”也就是“next”迂猴，但是卻沒有實(shí)現(xiàn)功能。其實(shí)在iOS上怎么實(shí)現(xiàn)我也不知道背伴，我只知道有一個(gè)三方IQKeyboardManager相當(dāng)好用沸毁。
廢話不多說，直接匯報(bào)結(jié)果：
結(jié)果圖
界面如上圖傻寂，要實(shí)現(xiàn)輸入一行息尺，點(diǎn)擊下一項(xiàng)繼續(xù)輸入，直到最后一項(xiàng)疾掰，鍵盤收起搂誉。
.wxml代碼
<view class="container">
<template name="cellViewTemplat">
<view class="cellView">
<view class="cellNameView">{{item.name}}</view>
<input class="cellInputView" focus="{{item.focus}}" id="{{item.inputId}}" confirm-type='{{item.inputId===1008?"done":"next"}}' bindconfirm="confirmBtnClicked" bindfocus="inputFocus" bindblur="inputblur" />
</view>
</template>
<view class="infoView">
<block wx:for="{{list1}}" for-key="key">
<template is="cellViewTemplat" data="{{item}}"></template>
</block>
</view>
<view class="infoView">
<block wx:for="{{list2}}" for-key="key">
<template is="cellViewTemplat" data="{{item}}"></template>
</block>
</view>
<button class="confirmButton">確認(rèn)保存</button>
</view>
.wxss代碼
.container {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.infoView {
padding: 10rpx;
margin: 20rpx;
width: 90%;
border: 1rpx lightgray solid;
border-radius: 8rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.cellView {
margin: 10rpx;
padding: 10rpx;
width: 100%;
border-bottom: 1rpx lightgray dashed;
/*display: flex;
flex-direction: row;
align-items: center;*/
}
.cellNameView {
float: left;
/*width: 30%;*/
/*text-align: center;*/
/*background-color: greenyellow;*/
}
.cellInputView {
float: right;
/*width: 70%;*/
text-align: right;
/*background-color: red;*/
}
.confirmButton {
color: white;
background-color: limegreen;
}
.js代碼
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
list1: [
{
name: '真實(shí)姓名',
focus: false,
content:"",
inputId: 1000
},
{
name: '職業(yè)',
focus: false,
content: "",
inputId: 1001
},
{
name: '手機(jī)',
focus: false,
content: "",
inputId: 1002
},
{
name: '郵箱',
focus: false,
content: "",
inputId: 1003
}
],
list2: [
{
name: '愛車品牌',
focus: false,
content: "",
inputId: 1004
},
{
name: '愛車型號',
focus: false,
content: "",
inputId: 1005
},
{
name: '發(fā)動機(jī)排量',
focus: false,
content: "",
inputId: 1006
},
{
name: '生產(chǎn)年份',
focus: false,
content: "",
inputId: 1007
},
{
name: '車牌號',
focus: false,
content: "",
inputId: 1008
}
],
},
/**
* confirmButtonCtrl
*/
confirmBtnClicked: function (event) {
console.log(event)
console.log(event.detail)
var that = this
console.log(that.data.list1)
console.log(that.data.list2)
var tempArray1 = that.data.list1
var tempArray2 = that.data.list2
var i = event.target.id - 1000
console.log("confirm-" + i)
if (i < tempArray1.length) {
//list1
tempArray1[i].focus = false
tempArray1[i].content = event.detail.value
if (i !== tempArray1.length - 1) {
tempArray1[i + 1].focus = true
} else {
tempArray2[0].focus = true
}
} else if (i < (tempArray1.length + tempArray2.length)) {
//list2
var j = i - tempArray1.length
tempArray2[j].focus = false
tempArray2[j].content = event.detail.value
if (j !== tempArray2.length - 1) {
tempArray2[j + 1].focus = true
} else {
console.log("all lose focus!")
}
}
that.setData({
list1: tempArray1,
list2: tempArray2
})
if (event.target.id === "1008") {
console.log("print data.list1:")
console.log(this.data.list1)
console.log("print data.list2:")
console.log(this.data.list2)
}
},
inputFocus: function (event) {
// var tempArray1 = this.data.list1
// var tempArray2 = this.data.list2
// var i = event.target.id - 1000
// console.log("inputFocus-" + i)
// if (i < tempArray1.length) {
// //list1
// if (tempArray1[i].focus) {
// return
// }
// tempArray1[i].focus = true
// } else if (i < (tempArray1.length + tempArray2.length)) {
// //list2
// if (tempArray2[i - tempArray1.length].focus) {
// return
// }
// tempArray2[i - tempArray1.length].focus = true
// }
// this.setData({
// list1: tempArray1,
// list2: tempArray2
// })
},
inputblur: function (event) {
// var tempArray1 = this.data.list1
// var tempArray2 = this.data.list2
// var i = event.target.id - 1000
// console.log("inputblur-" + i)
// if (i < tempArray1.length) {
// //list1
// if (!tempArray1[i].focus) {
// return
// }
// tempArray1[i].focus = false
// if (i !== tempArray1.length - 1) {
// tempArray1[i + 1].focus = true
// } else {
// tempArray2[0].focus = true
// }
// } else if (i < (tempArray1.length + tempArray2.length)) {
// //list2
// var j = i - tempArray1.length
// if (!tempArray2[j].focus) {
// return
// }
// tempArray2[j].focus = false
// if (j !== tempArray2.length - 1) {
// tempArray2[j + 1].focus = true
// } else {
// console.log("all lose focus!")
// }
// }
// this.setData({
// list1: tempArray1,
// list2: tempArray2
// })
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
}
})
原諒我直接把所有代碼都考過來了，哈哈个绍，主要是我不想刪勒葱，最開始考慮的是直接點(diǎn)擊confirm鍵就下一個(gè)input聚焦，但是發(fā)現(xiàn)微信小程序這個(gè)只能讓鍵盤一彈一收一彈一收巴柿，所以我還在input的聚焦和失去聚焦函數(shù)里嘗試過感覺麻煩 不實(shí)際凛虽，還是在confirmbutton的響應(yīng)事件里寫吧，萬一以后鍵盤不用一彈一收一彈一收了呢广恢，嘿嘿凯旋。
這算是我的一個(gè)小筆記吧，以后有時(shí)間了還會再寫的钉迷，可能設(shè)計(jì)很幼稚至非，也可能你有更好的方法，歡迎大家留言交流糠聪，輕點(diǎn)噴荒椭，輕點(diǎn)噴。
