柚子快報邀請碼778899分享：微信小程序 仿微信聊天界面

http://yzkb.51969.com/

1. 需求效果圖

2. 方案

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

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

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

2.2.鍵盤彈出或收起時，聊天消息沒有自動滾到最底部

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

var that = this;

var query = wx.createSelectorQuery();

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

that.setData({

scrollTop: rect.height+'px';

});

}).exec();

??（3）（推薦）將所有msg都編號如：msg-0，msg-1，msg-2… 直接鎖定最后一條msg，滾動到那里。 ??在scroll-view中添加：scroll-into-view=‘{{toView}}’， ??在wx:for后面添加：wx:for-index=“index”， ??在每個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,

})

//滾動到頁面底部

that.pageScrollToBottom()

},

/**

* 輸入監(jiān)聽

*/

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: '請輸入聊天內(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

})

//滾動到頁面底部

that.pageScrollToBottom()

},

/**

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

*/

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;

},

/**

* 滾動到頁面底部

*/

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ū)群，如有問題可在群里聊天詢問',

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

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

},

{

type: '0',

name: '小助手',

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

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

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

},

{

type: '1',

name: '',

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

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

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

},

{

type: '0',

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

msg: '已參加微報事活動',

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;

}

柚子快報邀請碼778899分享：微信小程序 仿微信聊天界面

http://yzkb.51969.com/

相關(guān)鏈接