柚子快報(bào)邀請(qǐng)碼778899分享：微信小程序 仿微信聊天界面

http://yzkb.51969.com/

1. 需求效果圖

2. 方案

??為實(shí)現(xiàn)這樣的效果，首先要解決兩個(gè)問(wèn)題：

2.1.點(diǎn)擊輸入框彈出軟鍵盤(pán)后，將已有的少許聊天內(nèi)容彈出，導(dǎo)致看不到的問(wèn)題

??點(diǎn)擊輸入框彈出軟鍵盤(pán)后，將已有的少許聊天內(nèi)容彈出，導(dǎo)致看不到的問(wèn)題。 ??（1）首先我們需要將input的自動(dòng)向上推給關(guān)掉，這里有個(gè)坑： 在input組件中添加：adjust-position=‘{{false}}’，而不是：adjust-position=‘false’。 ??這么做雖然不再向上推，但卻導(dǎo)致了軟鍵盤(pán)彈起時(shí)，會(huì)遮擋屏幕下部分的消息。 ??（2）如何解決軟鍵盤(pán)彈起時(shí)，會(huì)遮擋屏幕下部分的消息？ 當(dāng)軟鍵盤(pán)彈起時(shí)，將scroll-view的高度縮短至軟鍵盤(pán)遮擋不到的屏幕上方部分，當(dāng)軟鍵盤(pán)收起時(shí)，再將scroll-view的高度還原，這樣解決了遮擋問(wèn)題。 ??提示： ??input中的bindfocus='focus’可獲取軟鍵盤(pán)高度并監(jiān)聽(tīng)軟鍵盤(pán)彈起，bindblur='blur’可監(jiān)聽(tīng)軟鍵盤(pán)收起，var windowHeight = wx.getSystemInfoSync().windowHeight;可獲得屏幕高度。 ??scrollHeight（滾動(dòng)條高度） = windowHeight（屏幕高度） - 軟鍵盤(pán)高度; 最后將input組件放在軟鍵盤(pán)上面就完成了。

2.2.鍵盤(pán)彈出或收起時(shí)，聊天消息沒(méi)有自動(dòng)滾到最底部

??首先解決第二個(gè)問(wèn)題，自動(dòng)滾動(dòng)到最底部，這很簡(jiǎn)單，這里提供三種方法（推薦第三種）： ??（1）計(jì)算每條消息的最大高度，設(shè)置scroll-top=(單條msg最大高度 * msg條數(shù))px。 ??（2）用 將展示msg的目標(biāo)scroll-view包裹， ??通過(guò)js獲取到該view的實(shí)際高度：

var that = this;

var query = wx.createSelectorQuery();

query.select('.scrollMsg').boundingClientRect(function(rect) {

that.setData({

scrollTop: rect.height+'px';

});

}).exec();

??（3）（推薦）將所有msg都編號(hào)如：msg-0，msg-1，msg-2… 直接鎖定最后一條msg，滾動(dòng)到那里。 ??在scroll-view中添加：scroll-into-view=‘{{toView}}’， ??在wx:for后面添加：wx:for-index=“index”， ??在每個(gè)msg布局中添加：id=‘msg-{{index}}’，

this.setData({

toView: 'msg-' + (msgList.length - 1)

})

3. 代碼

3.1.gridGroup.wxml

{{item.time}}

{{item.name}}

{{item.msg}}

{{item.name}}

{{item.msg}}

發(fā)送

3.2.gridGroup.wxss

.page-layout {

width: 100%;

height: 100%;

box-sizing: border-box;

}

.page-body {

width: 100%;

display: flex;

flex-direction: column;

padding-bottom: 56px;

}

.chat-item-body {

display: flex;

flex-direction: column;

margin-top: 20rpx;

}

.chat-item-time {

width: 100vw;

text-align: center;

font-size: 28rpx;

color: #ccc;

border-radius: 10rpx;

margin-top: 40rpx;

}

.chat-item-layout {

display: block;

max-width: 82%;

margin: 1rpx 5rpx;

box-sizing: border-box;

padding: 0 1rpx;

}

.chat-right {

float: right;

}

.chat-left {

float: left;

}

.chat-inner-layout {

display: flex;

flex-direction: column;

}

.chat-item-photo {

width: 70rpx;

height: 70rpx;

min-width: 70rpx;

min-height: 70rpx;

border-radius: 50%;

}

.chat-item-msg-layout {

display: flex;

flex-direction: row;

}

.chat-item-name {

display: flex;

flex-direction: row;

align-items: center;

font-size: 28rpx;

color: #999;

border-radius: 10rpx;

margin: 5rpx 0 0 80rpx;

}

.chat-item-name-right {

display: flex;

flex-direction: row;

align-items: center;

font-size: 28rpx;

color: #999;

border-radius: 10rpx;

margin: 5rpx 0 0 5rpx;

}

.chat-inner-msg-left {

display: inline-block;

flex-direction: row;

align-items: center;

color: #000;

font-size: 30rpx;

border-radius: 10rpx;

background: white;

padding: 15rpx 5rpx 15rpx 15rpx;

margin-left: 12rpx;

}

.chat-inner-msg-right {

display: inline-block;

color: #000;

font-size: 30rpx;

border-radius: 10rpx;

background: #87EE5F;

padding: 15rpx 5rpx 15rpx 15rpx;

margin-right: 12rpx;

}

.submit-layout {

position: absolute;

bottom: 0;

width: 100%;

background: #eee;

flex-direction: row;

}

.submit-layout {

width: 100%;

position: fixed;

bottom: 0;

border-top: 1px solid #ddd;

padding: 10rpx 0;

display: flex;

flex-direction: row;

align-items: center;

}

.submit-input {

flex: 1;

background: #fff;

margin: 5rpx 10rpx;

border-radius: 5rpx;

padding: 15rpx 20rpx;

color: #333;

font-size: 30rpx;

}

.submit-submit {

background-color: #13c25f;

color: #333;

font-weight: 700;

font-size: 30rpx;

border-radius: 10rpx;

padding: 18rpx 30rpx;

margin-right: 10rpx;

}

3.3.gridGroup.js

import tinyCommunityJson from '../../public/json/tinyCommunityJson';

Page({

data: {

inputValue: '',

chatList: tinyCommunityJson.data.rows,

},

onLoad: function (options) {

var title = options.title

// 設(shè)置標(biāo)題

wx.setNavigationBarTitle({

title: title,

})

//滾動(dòng)到頁(yè)面底部

that.pageScrollToBottom()

},

/**

* 輸入監(jiān)聽(tīng)

*/

bindKeyInput: function (e) {

this.setData({

inputValue: e.detail.value

})

},

/**

* 發(fā)送

*/

submitTo: function (e) {

var that = this;

var inputValue = that.data.inputValue

if (!inputValue) {

wx.showToast({

title: '請(qǐng)輸入聊天內(nèi)容',

icon: 'none'

})

return

}

this.setData({

inputTemp: ""

})

var chatObj = {}

chatObj.type = '1'

chatObj.name = ''

chatObj.msg = inputValue

chatObj.time = that.getCurTime()

chatObj.photoUrl = 'https://zhsq/icon_chat_photo_three.jpg'

var chatList = that.data.chatList

chatList.push(chatObj);

that.setData({

chatList: chatList

})

//滾動(dòng)到頁(yè)面底部

that.pageScrollToBottom()

},

/**

* 獲取當(dāng)前時(shí)間

*/

getCurTime() {

var date = new Date()

var y = date.getFullYear();

var m = date.getMonth() + 1;

m = m < 10 ? ('0' + m) : m;

var d = date.getDate();

d = d < 10 ? ('0' + d) : d;

var h = date.getHours();

h = h < 10 ? ('0' + h) : h;

var minute = date.getMinutes();

minute = minute < 10 ? ('0' + minute) : minute;

var second = date.getSeconds();

second = second < 10 ? ('0' + second) : second;

return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;

},

/**

* 滾動(dòng)到頁(yè)面底部

*/

pageScrollToBottom: function () {

let that = this;

wx.createSelectorQuery().select('#x_chat').boundingClientRect(function (rect) {

let top = rect.height * that.data.chatList.length;

wx.pageScrollTo({

scrollTop: top,

duration: 100

})

}).exec()

},

})

3.4.tinyCommunityJson.js

const data = {

rows: [{

type: '0',

name: '群主',

msg: '大家好，歡迎進(jìn)入微社區(qū)群，如有問(wèn)題可在群里聊天詢(xún)問(wèn)',

time: '2024-01-26 13:43:12',

photoUrl: 'https://zhsq/icon_chat_photo_two.jpg',

},

{

type: '0',

name: '小助手',

msg: '2024微報(bào)事、微呼應(yīng)活動(dòng)正在進(jìn)行中，希望大家踴躍參加。',

time: '2024-01-26 13:43:15',

photoUrl: 'https://zhsq/icon_service.png',

},

{

type: '1',

name: '',

msg: '已參加微呼應(yīng)活動(dòng)',

time: '2024-01-26 13:56:10',

photoUrl: 'https://zhsq/icon_chat_photo_three.jpg',

},

{

type: '0',

name: '第五網(wǎng)格員',

msg: '已參加微報(bào)事活動(dòng)',

time: '2024-01-26 13:59:12',

photoUrl: 'https://zhsq/icon_chat_photo_one.jpg',

},

],

};

module.exports = {

data: data,

}

4. 優(yōu)化

??聊天框三角形的制作和使用

4.1. gridChat.wxml

我是右側(cè)布局我是右側(cè)布局我是右側(cè)布局我是右側(cè)布局我是右側(cè)布局

我是左側(cè)布局

4.2. gridChat.wxss

page {

background-color: #eee;

}

/* 左側(cè)布局 */

.left-layout {

display: flex;

justify-content: flex-start;

padding: 20rpx 60rpx 2vw 2vw;

}

.left-arrow-photo {

width: 60rpx;

height: 60rpx;

min-width: 60rpx;

min-height:60rpx ;

border-radius: 50%;

margin-top: 5rpx;

}

.left-msg {

font-size: 32rpx;

color: #444;

line-height: 45rpx;

padding: 10rpx 20rpx 10rpx 5rpx;

background-color: white;

margin-left: -12rpx;

border-radius: 10rpx;

z-index: 10;

}

.left-arrow-layout {

width: 35rpx;

height: 65rpx;

display: flex;

align-items: center;

z-index: 9;

}

.left-arrow-img {

width: 35rpx;

}

/* 右側(cè)布局 */

.right-layout {

display: flex;

justify-content: flex-end;

padding: 20rpx 2vw 2vw 15vw;

}

.right-arrow-photo {

width: 60rpx;

height: 60rpx;

min-width: 60rpx;

min-height:60rpx ;

border-radius: 50%;

margin-top: 5rpx;

}

.right-msg {

font-size: 32rpx;

color: #444;

line-height: 45rpx;

padding: 10rpx 5rpx 10rpx 20rpx;

background-color: #96EB6A;

margin-right: -12rpx;

border-radius: 10rpx;

z-index: 10;

}

.right-arrow-layout {

width: 35rpx;

height: 65rpx;

margin-right: 5rpx;

display: flex;

align-items: center;

z-index: 9;

}

.right-arrow-img {

width: 35rpx;

}

柚子快報(bào)邀請(qǐng)碼778899分享：微信小程序 仿微信聊天界面

http://yzkb.51969.com/

相關(guān)鏈接