微信小程序ui聊天窗口(微信小程序实现简单聊天室)
类别:编程学习 浏览量:1383
时间:2021-10-09 00:09:50 微信小程序ui聊天窗口
微信小程序实现简单聊天室本文实例为大家分享了微信小程序实现简单聊天室的具体代码,供大家参考,具体内容如下
cha.js
// pages/chat/chat.js // 获取小程序实例 let app = getApp(); Page({ /** * 页面的初始数据 */ data: { nickname:'', avatar:'', chatlists:[ { nickname:'小林', avatar:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591617971938&di=30d9f3b49a0d1b27fb4b61ea424f82c9&imgtype=0&src=http%3A%2F%2Fa-ssl.duitang.com%2Fuploads%2Fitem%2F201610%2F07%2F20161007135058_nUxji.jpeg', content:`你好呀!` } ], invalue:'' }, sendMsg:function(){ let _this = this; let obj = { nickname:_this.data.nickname, avatar:_this.data.avatar, content:_this.data.invalue }; let arr = _this.data.chatlists; arr.push(obj) _this.setData({ chatlists:arr, invalue:'' }); // 把聊天内容发送到服务器,处理完成后返回,再把返回的数据放到chatlist里面 }, getInput:function(e){ console.log(e.detail.value); this.setData({invalue:e.detail.value}); }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log(app.globalData.userInfo.nickName); this.setData({ nickname:app.globalData.userInfo.nickName, avatar:app.globalData.userInfo.avatarUrl }); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
chat.wxml
<block wx:for="{{chatlists}}" wx:for-index="ind" wx:for-item="chat" wx:key="ind"> <view class="chat self" wx:if="{{nickname == chat.nickname}}"> <view class="right"> <view class="content"> {{chat.content}} </view> </view> <view class="left"> <image class="avatar" src="{{chat.avatar}}"></image> </view> </view> <view class="chat" wx:else> <view class="left"> <image class="avatar" src="{{chat.avatar}}"></image> </view> <view class="right"> <view class="nickname">{{chat.nickname}}</view> <view class="content"> {{chat.content}} </view> </view> </view> </block> <view class="form"> <view class="weui-cell weui-cell_input"> <input class="weui-input" value="{{invalue}}" bindinput="getInput" placeholder="请输入聊天内容" /> </view> <button type="primary" bindtap="sendMsg">发送</button> </view>
chat.css
/* pages/chat/chat.wxss */ .avatar{ width: 130rpx; height: 130rpx; border-radius: 50%; } .chat{ display: flex; align-items: center; margin-top: 15px; } .self{ justify-content: flex-end; margin-top: 15px; } .left{ padding: 20rpx; align-self: flex-start; } .self .left{ padding-top: 0; } .right{ margin-left: 10px; } .right .content{ background-color: #eee; color: #123; font-size: 16px; /* border:1px solid #ddd; */ padding: 10px; line-height: 26px; margin-right: 10px; border-radius: 3px; position: relative; min-height: 20px; } .right .content::before{ content: ' '; display: block; width: 0; height: 0; border: 12px solid transparent; border-right-color:#eee; position: absolute; top: 10px; left: -23px; } .self .right .content::before{ border: 0; } .self .right .content::after{ content: ' '; display: block; width: 0; height: 0; border: 12px solid transparent; border-left-color:#1ad409; position: absolute; top: 10px; right: -23px; } .self .right .content{ background-color: #1ad409; } .form{ position: fixed; bottom: 0; background-color: #eee; width: 750rpx; display: flex; height: 39px; align-items: center; } .form input{ width: 600rpx; background-color: #fff; height: 36px; line-height: 36px; padding: 0 5px; } button{ width:65rpx; height:36px; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- 微信小程序苹果部分内容打不开(微信小程序audio组件在ios端无法播放的解决办法)
- 微信小程序抽签如何抽中(JavaScript实现班级抽签小程序)
- 苹果微信小程序页面空白(iPhoneX安全区域Safe Area底部小黑条在微信小程序和H5的屏幕适配)
- 微信小程序接口返回数据怎么弄(微信小程序页面返回传值的4种解决方案汇总)
- 微信小程序ui聊天窗口(微信小程序实现简单聊天室)
- 微信小程序引用模板的函数(微信小程序页面与组件之间信息传递与函数调用)
- 微信小程序语音录入(微信小程序使用同声传译实现语音识别功能)
- 微信小程序开发简单计算器(小程序实现计算器功能)
- 微信小程序开发模式(微信小程序引入Vant框架的全过程记录)
- 宝塔小程序制作(宝塔面板微信小程序使用图文教程)
- 微信小程序简易计算器制作(微信小程序实现简单计算器功能)
- 微信小程序日期选择器有星期天(微信小程序 滚动选择器时间日期详解及实例代码)
- 微信小程序js 抽奖概率(小程序实现筛子抽奖)
- flask项目微信小程序(Python Flask 搭建微信小程序后台详解)
- 微信小程序计算器怎么用(微信小程序实现计算器功能)
- 微信小程序开发完整操作流程(微信小程序开发之组件设计规范)
- 读卖乐园的彩灯(读卖乐园的彩灯)
- 新疆80后在淘宝卖干果 以前是 不务正业 如今帮乡亲致富(新疆80后在淘宝卖干果)
- 弄清楚了销 售 买 卖这四个字,母婴生意做起来就没那么难了(弄清楚了销售买)
- 数读 买首饰金是 投资黄金 吗 买金容易卖金难(数读买首饰金是)
- 销 售 买 卖 你真的了解这四个字了吗(销售买)
- 谢娜是得罪快乐大本营造型师了吗 全场被黑化(谢娜是得罪快乐大本营造型师了吗)
热门推荐
- vue 为什么使用虚拟dom(Vue虚拟Dom到真实Dom的转换)
- python程序运行步骤(详解python运行三种方式)
- 使用VS调试存储过程
- python如何遍历一个列表(说说如何遍历Python列表的方法示例)
- python爬虫request方法介绍(详解Python3网络爬虫二:利用urllib.urlopen向有道翻译发送数据获得翻译结果)
- docker配置https访问方式(docker 中配置 eureka的方法)
- python编写一个名片(详解Python做一个名片管理系统)
- php如何继承多个类(PHP面向对象程序设计子类扩展父类子类重新载入父类操作详解)
- jQuery end()
- .NET开发中应该遵循的几个规则
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9