美文网首页
小程序textarea层级问题

小程序textarea层级问题

作者: 肥羊猪 | 来源:发表于2021-03-15 20:13 被阅读0次

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

相关文章

网友评论

      本文标题:小程序textarea层级问题

      本文链接:https://www.haomeiwen.com/subject/tctlcltx.html