wtml:
<view class="text_area_view">
<view bindtap='handleFocus' wx:if="{{hidden == true}}" >{{record_addr?record_addr: '请输入居住地址'}}</view>
<view wx:if="{{hidden == false}}">
<textarea maxlength="24" auto-height value='{{record_addr}}' fixed='true' bindinput='textarea' focus="{{focus}}" bindblur="leaveFocus" placeholder="请输入居住地址"></textarea>
</view>
</view>
当adjust-position="true" cursor-spacing="150rpx"
处理输入框被键盘挡住问题失效时:
bindfocus | eventhandle | | 否 | 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度,在基础库 1.9.90 起支持 | [1.0.0](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html) |
| bindblur | eventhandle | | 否 | 输入框失去焦点时触发,event.detail = {value, cursor} |
js
Page({
data: {
hidden: true, // 控制弹窗显示隐藏
focus:false,// 原生组件textarea是否聚焦
record_addr:'',
},
// 解决textarea穿透问题
// 点击view框的时候 展示texteare框 聚焦textarea
handleFocus: function () {
this.setData({
hidden: false,
focus:true
})
},
// 移除textarea聚焦后 展示view框 赋值textarea框的内容渲染 失去焦点
leaveFocus(e){
this.setData({
hidden: true,
focus: false,
record_addr: this.data.record_addr,
})
},
// 点击textarea框 赋值展示内容
textarea: function (e) {
this.setData({
record_addr: e.detail.value
})
this.triggerEvent('change', e.detail.value)
},
})
或者使用 cover-view
替换 view
来解决
.bottom_btn {
position: fixed;
bottom: 0;
width: 750rpx;
z-index: 999;// 很重要
}
<cover-view class="bottom_btn">
<button class="primary" >立即报名</button>
</cover-view>
参考https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html
网友评论