我们都知道小程序是不能直接操作dom的，所以做即时通讯聊天功能的时候也就不能像之前做的一样：点击发送的时候，拼接一个节点到页面上。话不多说，以下是效果和代码：
-----------------------chat.js------------------------------
// pages/chat/chat.js
Page({
/**
* 页面的初始数据
*/
data: {
lists: [
],
scrollTop: 100,//设置滚动条到顶部的距离
centence:‘‘,
length:0,
},
//点击发送以后的事件处理函数
addItemFn: function () {
var {lists} = this.data;
var newData = { value: this.data.centence };
lists.push(newData);
this.setData({
lists: lists,
centence:‘‘
})
console.log(lists)
},
inputFunc:function(e){
this.setData({
centence: e.detail.value
})
// console.log(this.data.centence)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
------------------------chat.wxml-------------------------------
<view class="container">
<!-- <button type="primary" >添加</button> -->
<scroll-view class="scroll" scroll-y="true" scroll-top="{{scrollTop}}">
<block wx:for="{{lists}}" wx:key="*this">
<view class="item" data-index="{{index}}" id="item{{index}}" class="myMsg flexBox">
<view class="msg"><view class="eachMsg">{{item.value}}</view><text class="iconfont icon-triangle-right"></text></view>
<image src=‘/assets/images/chatdoc.png‘></image>
</view>
</block>
</scroll-view>
<view class="bottom">
<input placeholder="" auto-focus name="centences" bindinput=‘inputFunc‘ value="{{centence}}" auto-focus/>
<view class=‘icon‘ bindtap=‘addItemFn‘>
<text>发送</text>
</view>
</view>
</view>
望互相指教。。。。
原文地址：https://www.cnblogs.com/crystal-wei/p/9168241.html
时间： 2024-10-11 22:49:46