微信小程序页面遮挡解决

微信小程序解决输入框遮挡聊天界面问题

这段时间在做一个人工智能聊天客服，突然发现当聊天的语言变多的时候，发生最下面的聊天记录会被固定在下方的input输入框挡到，像下面这样子

很难受，于是修改聊天框所在view的margin-bottom，没什么用，因为页面高度不能写固定的，所以想来想去，找到一个好办法，在聊天容器下面加个小容器，设置高度就行

#wxml
<view class="mainbox">
<view wx:for="{{list}}" wx:key="index" class="{{item.role=='user'?'rightcontent':'leftcontent'}}"><image src="{{item.role=='user'?avatar:'../../public/aihead.jpg'}}" mode="widthFix" class="headlogo"/><view class="{{item.role=='user'?'rightjian:':'leftjian'}}"></view><view class="{{item.role=='user'?'user':'system'}}">{{item.content}}</view>
</view>
</view>
<view class="bulkhead">   //加上这个小容器
</view>
#wxss
.bulkhead
{height: 30rpx;
}

成功啦！

后面再写一篇关于input随键盘弹起改变高度的，不然被手机键盘挡到。

微信小程序页面遮挡解决相关推荐

IOS微信小程序页面滚动导致滚动穿透的解决办法
IOS微信小程序页面滚动导致滚动穿透的解决办法当微信小程序页面存在弹窗并且有可滚动的列表时,IOS默认的页面滚动会使弹窗滚动列表失焦,从而出现弹窗列表无法滚动的情况第一步第二步当微信小程序页面 ...
微信小程序页面跳转，url传参参数丢失问题
微信小程序页面跳转,url传参参数丢失问题 // pages/order/purchase/index.js// 跳转到采购订单详情toPurchaseOrderDetail(e) {// conso ...
微信小程序界面从右边滑出_微信小程序页面溢出左右滑动问题
微信小程序页面中view设置width:100%之后,页面右边会多出一块白区域,并且可以左右滑动,解决方法是给这个view加一个box-sizing:border-box; 欢迎使用Markdown ...
微信小程序页面上下滚动、左右滑动（二）
系列文章目录微信小程序页面上下滚动.左右滑动(一) 文章目录系列文章目录前言项目结构解决问题1 1.pretest页面 2.test页面解决问题2 总结参考前言在上一篇文章,讲解了再 ...
微信小程序页面竖向滚动逻辑
微信小程序页面竖向滚动逻辑 1.实现下面类似的数组注:下面这个生成的数组最好是整数,滑动的时候会失去精度的,要不然你永远会差一点,让你崩溃的.而且你永远不知道差在哪里. this.leftScrol ...
vue 传参微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
微信小程序页面传值文本解密问题
微信小程序页面传值文本解密问题遇到问题最近在做小程序,遇到这样一个需求: 将百度的Ueditor编辑器存入的文本数据显示在小程序中,需要保留之前的样式,这就用到了 WxParse插件,它能够用解 ...
微信小程序-页面间如何进行传递数据(通信)
前言在小程序中组件与组件之间的通信是通过在引用组件处,在自定义组件上添加自定义属性实现的,子组件内部通过properties进行接收更多关于组件与组件之间的通信可参考小程序-实现自定义组件以及自定 ...
微信小程序页面跳转限制问题
微信小程序页面跳转,如果使用wx.navigateTo或者navigator标签进行跳转,最多只能跳转10次 (超过10次,在怎么点也不会跳转),这很不利于用户的体验.那么就来解决这个问题(小声比比) ...

微信小程序页面遮挡解决

微信小程序解决输入框遮挡聊天界面问题

微信小程序页面遮挡解决相关推荐

最新文章

热门文章