一個簡單的微信小程序聊天對話窗口界面,包括發(fā)送文本功能
直接上代碼,js代碼:
// 簡單版
Page({
data: {
content: '',
// 當(dāng)前登錄者信息
login: {
id: '2023',
user: '大豬蹄子',
avatar: 'https://img2.baidu.com/it/u=1581320883,910100018&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=9135844131fa04a7ad00686d88c76752'
},
// 聊天信息
chatList: [{
msgId: '2023',
nickname: '大豬蹄子',
avatar: 'https://img2.baidu.com/it/u=1581320883,910100018&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=9135844131fa04a7ad00686d88c76752',
message: '一個簡單的聊天對話窗口界面',
type: 'text',
date: '05-02 14:24' // 每隔5分鐘記錄一次時間
},
{
msgId: '2022',
nickname: '泡椒風(fēng)爪',
avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',
message: '更多發(fā)送表情、視頻以及圖片功能,由于不好打包文件夾,請前往下方底部鏈接,下載完整版壓縮包.',
type: 'text'
},
{
msgId: '2022',
nickname: '泡椒風(fēng)爪',
avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',
message: '該消息為撤回消息',
type: 'custom'
},
{
msgId: '2023',
nickname: '大豬蹄子',
avatar: 'https://img2.baidu.com/it/u=1581320883,910100018&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=9135844131fa04a7ad00686d88c76752',
message: '嘞 對頭,解壓文件夾后,可直接使用完整版',
type: 'text'
},
{
msgId: '2022',
nickname: '泡椒風(fēng)爪',
avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',
message: '若出現(xiàn)iOS不兼容現(xiàn)象,請自行調(diào)整哦',
type: 'text',
date: '05-04 16:05'
},
{
msgId: '2022',
nickname: '泡椒風(fēng)爪',
avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',
message: '沒有用蘋果手機(jī)測試?yán)?,
type: 'text'
},
{
msgId: '2022',
nickname: '泡椒風(fēng)爪',
avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',
message: '該消息為撤回消息',
type: 'custom'
},
{
msgId: '2023',
nickname: '大豬蹄子',
avatar: 'https://img2.baidu.com/it/u=1581320883,910100018&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=9135844131fa04a7ad00686d88c76752',
message: '請前往下方鏈接,使用完整版',
type: 'text'
},
{
msgId: '2023',
nickname: '大豬蹄子',
avatar: 'https://img2.baidu.com/it/u=1581320883,910100018&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=9135844131fa04a7ad00686d88c76752',
message: '謝謝各位親的點(diǎn)贊關(guān)注和收藏',
type: 'text'
},
{
msgId: '2022',
nickname: '泡椒風(fēng)爪',
avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',
message: '哈哈哈',
type: 'text',
date: '05-06 11:21'
},
{
msgId: '2022',
nickname: '泡椒風(fēng)爪',
avatar: 'https://img0.baidu.com/it/u=3997048646,1811313428&fm=253&app=53&size=w500&n=0&g=0n&f=jpeg?sec=1686045994&t=0e1a0c5e962337e74750fba219bb3b51',
message: '已滑動至最底部',
type: 'text',
date: '05-07 19:08'
},
],
},
onLoad() {
this.scrollToBottom();
},
// 輸入監(jiān)聽
inputClick(e) {
this.setData({
content: e.detail.value
})
},
// 發(fā)送監(jiān)聽
sendClick() {
var that = this;
var list = this.data.chatList;
// 獲取當(dāng)前時間
var date = new Date();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minu = date.getMinutes();
var now1 = month < 10 ? '0' + month : month;
var now2 = day < 10 ? '0' + day : day;
// 組裝數(shù)據(jù)
var msg = {
msgId: this.data.login.id,
nickname: this.data.login.user,
avatar: this.data.login.avatar,
message: this.data.content,
type: 'text',
date: now1 + '-' + now2 + ' ' + hour + ':' + minu
}
this.setData({
chatList: list.concat(msg)
}, () => {
that.scrollToBottom();
that.setData({
content: ''
})
})
},
// 滑動到最底部
scrollToBottom() {
setTimeout(() => {
wx.pageScrollTo({
scrollTop: 200000,
duration: 3
});
}, 600)
},
})
wxml代碼:
<!-- 簡單版 -->
<view class="scroll-list">
<block wx:for="{{chatList}}" wx:for-index="index" wx:for-item="item" wx:key="item">
<view wx:if="{{item.date}}" class="show-date">{{item.date}}</view>
<view wx:if="{{item.type=='custom'}}" class="row tips-text">
<text>{{login.id==item.msgId?'你':item.nickname}}撤回了一條消息</text>
</view>
<view class="{{login.id==item.msgId?'row row-self':'row'}}" wx:else>
<view class="{{login.id==item.msgId?'head-self':'head-friend'}}">
<image class="avatar" src="{{item.avatar}}"></image>
</view>
<view>
<view wx:if="{{login.id!=item.msgId}}" class="nick">{{item.nickname}}</view>
<view class="{{login.id==item.msgId?'message msg-self':'message msg-friend'}}">
<text>{{item.message}}</text>
</view>
</view>
</view>
</block>
</view>
<!-- 發(fā)送信息 -->
<view class="footer">
<view class="row">
<view class="input-box">
<textarea class="text-area" placeholder-class="placeholder" show-confirm-bar="{{false}}" cursor-spacing="30" maxlength="500"
disable-default-padding="{{true}}"
confirm-hold="{{true}}" hold-keyboard="{{true}}" auto-height="false" placeholder="輸入信息" bindinput="inputClick" value="{{content}}"></textarea>
</view>
<view class="send-btn" wx:if="{{content!=''}}">
<text class="send-text" bindtap="sendClick">發(fā) 送</text>
</view>
</view>
</view>
wxss代碼:
page {
background-color: #f1f1f1;
}
.scroll-list {
padding-bottom: 120rpx;
}
/* 顯示時間 */
.show-date {
text-align: center;
font-size: 24rpx;
padding: 15rpx 0;
color: gray;
}
/* 每行對話樣式 */
.row {
display: flex;
flex-direction: row;
padding: 20rpx;
}
/* 提示信息 */
.tips-text {
text-align: center;
justify-content: center;
font-size: 28rpx;
color: gray;
}
.row-self {
flex-direction: row-reverse;
}
/* 頭像 */
.head-self {
margin-left: 20rpx;
}
.head-friend {
margin-right: 20rpx;
}
.avatar {
width: 100rpx;
height: 100rpx;
border-radius: 20rpx;
overflow: hidden;
}
.nick {
color: gray;
font-size: 24rpx;
margin-bottom: 15rpx;
}
/* 消息內(nèi)容 */
.message {
background-color: white;
font-size: 30rpx;
padding: 20rpx;
display: flex;
align-items: center;
line-height: 45rpx;
}
.msg-self {
border-top-left-radius: 30rpx;
border-bottom-right-radius: 30rpx;
color: #434343;
background-image: linear-gradient(to right, #33ccff, #B0E2FF);
}
.msg-friend {
border-top-right-radius: 30rpx;
border-bottom-left-radius: 30rpx;
color: #ffffff;
background-image: linear-gradient(to right, #ff9933, #ff6633);
}
/* 以下為輸入框樣式 */
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 9;
background-color: white;
border-top: 1rpx solid #f1f1f1;
}
.input-box {
flex: 5;
border: 1rpx solid #f1f1f1;
border-radius: 10rpx;
}
.send-btn {
flex: 1;
text-align: center;
margin-left: 10rpx;
color: white;
margin-top: 10rpx;
}
.send-text {
background-color: #FF6347;
font-size: 30rpx;
border-radius: 10rpx;
padding: 12rpx 20rpx;
}
.text-area {
max-height: 180rpx;
width: 98%;
padding: 15rpx 10rpx;
font-size: 30rpx;
}
.placeholder {
font-size: 30rpx;
}
/* 隱藏滾動條 */
::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
json代碼:文章來源：http://www.zghlxwxcb.cn/news/detail-507002.html
{
"usingComponents": {},
"navigationBarTitleText": "聊天對話窗",
"navigationBarBackgroundColor": "#FF6347"
}
更多功能的微信小程序聊天界面(包括發(fā)送表情、視頻、圖片),請點(diǎn)擊鏈接:
https://download.csdn.net/download/weixin_45465881/87762409文章來源地址http://www.zghlxwxcb.cn/news/detail-507002.html
到了這里，關(guān)于簡單的小程序聊天對話窗口界面的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
