需求:后台添加需要输入的项,前端展示+提交
问题:for循环数据后需要滚动,若input框不失焦则输入框内文字会脱离输入框,浮在屏幕上
解决思路:滑动时使input主动失焦,或input聚焦时不允许页面滑动,但input没有主动失焦事件,不允许页面滑动的方法在该项目不适用,经观察,每次input框内内容脱离软键盘都是弹起状态,故解决方法为监听页面滑动,滑动时收起软键盘uni.hideKeyboard()
<scroll-view scroll-y="true" class="fullHeight" @scroll="scroll">
<view v-for="(item,index) in form_list" :key='index' v-if="!update">
<view class="block" v-if="item.type == 0">
<view style="margin-bottom: 5px;">
<text>{{item.name}}</text>
<text style="color: #c32136;" v-if="item.is_bi == 1">*</text> :
</view>
<view style="padding: 5px;border: 1px solid #eaeaea;">
<input type="text" placeholder="请输入" v-model="item.value" @focus="onfocus" @blur="onblur" :always-embed='true'>
</input>
<!-- <u-input v-model="item.value" type="text" border="true" placeholder="请输入" :clearable="false" /> -->
</view>
</view>
</view>
</scroll-view>
data() {
return {
form_list: [
{name: "姓名", type: 0, select: null, is_bi: 1},
{name: "性别", type: 1, select: ["男", "女"], is_bi: 1},
{name: "年龄", type: 0, select: "", is_bi: 1},
{name: "出生日期", type: 0, select: "", is_bi: 1},
{name: "邮箱", type: 0, select: "", is_bi: 0}
],
update: false,
}
},
methods: {
scroll(e) {
uni.hideKeyboard()
},
}