微信小程序防微信聊天界面（scroll-view滚动、下拉刷新、键盘弹起不遮挡文字、苹果手机底部安全距离处理等）细节处理

1.图形界面展示如下

2.scroll-view详解

//1.分析：对话有很多种格式，我们需要封装一个组件作为对话的子组件展示我们消息的内容
//2.scroll-view 每次消息返回都要滚动到最新的一条数据 利用对话里面唯一id和scroll-into-view去实现
//wxml代码如下
<!-- 消息滚动区域  开始 -->
    <scroll-view  bindrefresherrefresh="freshPages" refresher-triggered="{{triggered}}" refresher-enabled="{{true}}" class="scroll-wrapper" style="height:{{scrollHeight}}" scroll-into-view="{{scrollTo}}"  scroll-y="true"  scroll-with-animation="{{true}}">
        <!-- <view class="record-wrapper"> -->
            <chat-items 
                ref="chatItem" 
                id="item{{index}}" 
                message="{{item.message}}" 
                >
            </chat-items>
    </scroll-view>
<!-- 消息滚动区域  结束 -->
//js代码如下：messageList是你的消息数组
 this.setData({
    scrollTo:`item${this.data.messageList.length - 1}`
 })//实现消息滚动到底部
this.setData({
   scrollHeight:this.data.inputShow ? '76%' : '90%'
})//实现有输入框和无数框的时候的scroll-view的动态高度                    

3.下拉刷新

//triggered: false, //是否开始自定义下拉刷新（）在data定义
 	freshPages(){
       	if(this.data.lastPage){
            //最后一页
            this.setData({
                triggered:false
            })
            wx.showToast({
                title:'没有更多了~',
                icon:'none',
                duration:3000
            })
        }else{
            this.setData({
                pageNum:this.data.pageNum + 1
            })
            this.getMoreMsg()//获取更多历史消息
        }
    },

4.键盘弹起不遮挡对话文字

//1.需求拆解：当输入框聚焦的时候获取键盘的高度以及获取底部安全距离，获取键盘的高度设置输入框距离底部的高度，那么scroll-view的高度就等于屏幕的高度-键盘的高度-底部安全距离，再让消息自动滚动到底部就可以了。当输入框失去焦点的时候，还原scroll-view的高度即可
//wxml代码
    <!-- 底部输入框  开始 -->
    <view class="msg-bottom" style="bottom:{{bottom}}px" wx:if="{{inputShow}}">
        <!-- 症状列表功能  开始-->
        <!-- <view class="question-examples" wx:if="{{serviceBaseUrl == 3}}">
            <view bind:tap="handleUploadImg">
                <image src="{{symptomUrl}}">
                </image>
                <text>上传图片</text>
            </view>
        </view> -->
        <!-- 症状列表功能  结束-->
        <view class="msg-bottom-content">
            <!-- <image src="{{yyUrl}}" bindtap="switchVoice" wx:if="{{isVoice}}" mode="widthFix"></image>
            <image src="{{wzUrl}}" wx:if="{{!isVoice}}" bindtap="switchKeyboard" mode="widthFix"></image>
            <view class="sound-recording" bindtouchstart="handleTouchStart"  bindtouchmove="handleTouchMove" bindtouchend="handleTouchEnd" bindtouchcancel="handleTouchCancel" wx:if="{{!isVoice}}">
                {{isRecording ? '松开 结束' : '按住 说话'}}
            </view> -->
            <textarea class="intelligent_textarea" maxlength="-1" 	auto-height  bindblur="textareaBlur" confirm-type="send"	bindinput="textareaInput" bindconfirm="handleSend" bindfocus="textareaFocus"  bindkeyboardheightchange="getKeyboardHeight"	adjust-position="{{false}}"  type="text" wx:if="{{isVoice}}" placeholder-style="background:#f2f7ff"  show-confirm-bar="{{false}}" value="{{textVal}}"></textarea>
            <!-- <view class="send-btn" bindtap="handleSend">发送</view> -->
            <image src="{{addImgUrl}}" wx:if="{{serviceBaseUrl == 3}}" class="addImage" bind:tap="handleUploadImg" mode="widthFix"></image>
            <image src="{{sendImg}}" class="sendBtn" bind:tap="handleSend" mode="widthFix"></image>
        </view>
        <view class="{{blankStatus ? 'msg-bottom-blank' : 'msg-bottom-none'}}" >

        </view>
    </view>
    <!-- 底部输入框  结束 -->
    //输入框聚焦
    textareaFocus(e) {
        // this.keyboardHeightChange()
        let keyHeight = e.detail.height
        let windowHeight = wx.getSystemInfoSync().windowHeight
        let safeHeight = wx.getSystemInfoSync().screenHeight - wx.getSystemInfoSync().safeArea.bottom
        let safeView = this.data.blankStatus ? 32 : 0
        this.setData({
            scrollHeight:(windowHeight - keyHeight - safeHeight - safeView) + 'px'
        })
        this.setData({
            scrollTo:`item${this.data.messageList.length - 1}`,
        })
    },
 //获取键盘的高度
   getKeyboardHeight(e){
        let keyHeight = e.detail.height || 0 
        this.setData({
            bottom:keyHeight
        })
    },
  //失去焦点时改变位置
    textareaBlur(e) {
        this.setData({
            bottom: 0,
            scrollHeight:this.data.inputShow ? '76%' : '90%'
        })
    },
 //判断设备有没有安全距离
    isIPhoneX(){
        let screenHeight = wx.getSystemInfoSync().screenHeight
        let bottom = wx.getSystemInfoSync().safeArea.bottom
        console.log(screenHeight,bottom);
        this.setData({
            blankStatus:screenHeight !== bottom
        })
    },