我要评论
.wxml
<scroll-view scroll-y="true" style="height: {{windowheight}}px;">
<view wx:for="{{chatlist}}" wx:for-index="index" wx:for-item="item" style="padding-top:{{index==0?30:0}}rpx">
<!-- 左边：对方用户 -->
<view style="display: flex; align-items: flex-start; margin-bottom: 10px;padding: 10rpx 20rpx;" wx:if="{{item.id != userinfo.id}}">
<view>
<image src="{{item.url}}" style="width: 35px; height: 35px; border-radius: 10px;"></image>
</view>
<view style="padding: 15rpx 20rpx;border-radius: 0 10px 10px 10px;background-color: #ffffff; margin-left: 10rpx; display: inline-block;">
<text>{{item.content}}</text>
</view>
</view>
<!-- 右边：当前用户 -->
<view style="display: flex; align-items: flex-start; justify-content: flex-end;padding: 10rpx 20rpx;" wx:else>
<view style="padding: 15rpx 20rpx; background-color: #7e66f6; border-radius: 10px 0 10px 10px; margin-right: 10rpx;color: #ffffff;">
<text>{{item.content}}</text>
</view>
<view>
<image src="{{item.url}}" style="width: 35px; height: 35px; border-radius: 10px;"></image>
</view>
</view>
</view>
<!-- 底部输入框及发送按钮 -->
<view style="position: fixed; bottom: {{bottomjp}}px; width: 100%; background-color: #fff; padding: 0 10rpx; box-shadow: 0 -2px 4px rgba(202, 202, 202, 0.1);height: 130rpx;display: flex;justify-content: space-around;align-items: center;padding-bottom: 30rpx;">
<image src="/images/yuyin.png" style="width: 30px; height: 30px; border-radius: 10px;"></image>
<input style="height: 20rpx;width: 60%; padding: 15rpx; border: 1px solid rgb(247, 245, 245); border-radius: 10rpx;" confirm-type="send" adjust-position="{{false}}" bindfocus="getteliptheight" bindblur="getteliptheight" bindconfirm="sendcontent" value="{{inputvalue}}"/>
<image src="/images/biaoqing.png" style="width: 30px; height: 30px; border-radius: 10px;"></image>
<image src="/images/tupian.png" style="width: 30px; height: 30px; border-radius: 10px;margin-right: 20rpx;"></image>
<!-- <button style="width: 150rpx; height: 80rpx; background-color: #007bff; color: #fff; border: none; border-radius: 10px; margin-left: 10rpx;">发送</button> -->
</view>
</scroll-view>.js
const app = getapp()
page({
/**
* 页面的初始数据
*/
data: {
tips: null,
windowheight: 0,
windowwidtth: 0,
bottomjp: 0,
userinfo: {},
inputvalue: '',
chatlist: [{
createtime: '2024-07-24 09:10:00',
url: '/images/baochang.png',
content: '哈哈哈',
id: 8
},
{
createtime: '2024-07-24 11:15:30',
url: '/images/baochang.png',
content: '你好啊',
id: 9
},
{
createtime: '2024-07-24 11:15:30',
url: '/images/baochang.png',
content: '你好啊',
id: 9
},
]
},
getteliptheight(e) {
console.log("height---------", e);
if (e.type == 'blur') {
this.setdata({
bottomjp: 0
})
} else {
this.setdata({
bottomjp: e.detail.height
})
}
},
onload(options) {
let that = this
that.setdata({
userinfo: wx.getstoragesync("userinfo")
})
wx.getsysteminfo({
success: function (res) {
console.log(res)
that.setdata({
windowheight: res.windowheight,
windowwidtth: res.windowwidth,
});
}
});
wx.setnavigationbartitle({
title: '动态获取用户昵称',
})
},
send() {
let info = {
senderid: wx.getstoragesync("userinfo").id,
recipientid: 100,
chatcontent: '你好啊~',
chatcontenttype: 'text'
}
let that = this
app.globaldata.ws.send({
data: json.stringify(info),
success: (res) => {
console.log(res)
that.setdata({
tips: "发送信息成功"
})
}
})
},
sendcontent(e) {
let message = {
createtime: '2024-07-24 11:15:30',
url: '/images/baochang.png',
content: e.detail.value,
id: 9
}
let list = this.data.chatlist
list.push(message)
this.setdata({
chatlist: list,
inputvalue: ''
})
}
}).wxss
page {
background-color: #f4f5f7;
}.json
{
"usingcomponents": {},
"navigationbartitletext": ""
}到此这篇关于微信小程序实现聊天界面，发送功能的文章就介绍到这了,更多相关小程序聊天发送功能内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论