聲明在前，我是做iOS開發的，最近在研究小程序，對HTML了解的也是相當的少，所以你懂的，做小程序反應就稍慢點，不過我在學啊O(∩_∩)O哈哈~。根據官方的小程序簡易教程按著流程一步一步的做還是很好入門的，大家有興趣的可以試一下，保證不是騙人的。
在使用的過程中，我遇到了一個問題：input標簽可以設置鍵盤的confirm鍵的名字叫“下一項”也就是“next”，但是卻沒有實現功能。其實在iOS上怎么實現我也不知道，我只知道有一個三方IQKeyboardManager相當好用。
廢話不多說，直接匯報結果：
結果圖
界面如上圖，要實現輸入一行，點擊下一項繼續輸入，直到最后一項，鍵盤收起。
.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">確認保存</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({
/**
* 頁面的初始數據
*/
data: {
list1: [
{
name: '真實姓名',
focus: false,
content:"",
inputId: 1000
},
{
name: '職業',
focus: false,
content: "",
inputId: 1001
},
{
name: '手機',
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: '發動機排量',
focus: false,
content: "",
inputId: 1006
},
{
name: '生產年份',
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
// })
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數--監聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數--監聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數--監聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數--監聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
原諒我直接把所有代碼都考過來了，哈哈，主要是我不想刪，最開始考慮的是直接點擊confirm鍵就下一個input聚焦，但是發現微信小程序這個只能讓鍵盤一彈一收一彈一收，所以我還在input的聚焦和失去聚焦函數里嘗試過感覺麻煩 不實際，還是在confirmbutton的響應事件里寫吧，萬一以后鍵盤不用一彈一收一彈一收了呢，嘿嘿。
這算是我的一個小筆記吧，以后有時間了還會再寫的，可能設計很幼稚，也可能你有更好的方法，歡迎大家留言交流，輕點噴，輕點噴。
