前端微信小程序实时聊天案例

前端-【微信开发】-微信小程序实时聊天案例

	<scroll-view class="sv" scroll-y scroll-into-view="{{toBottom}}">
		<view class="data-mess">
			<text class="data-messText">{{data}}</text>
		</view>
		<view  class="box-item">
		<view class="box" wx:for="{{content}}" id="item{{index}}">
			<view class="item" wx:if="{{item.id == 1}}">
				<image src="{{mineAvatorSrc}}" class="mineAvatorSrc"></image>
				<view class="mineTextBox">
					<text class="mineText">{{item.text}}</text>
				</view>
			</view>
			<view class="item" wx:if="{{item.id == 0}}">
				<view class="himTextBox">
					<text class="himText">{{item.text}}</text>
				</view>
				<image src="{{himAvatorSrc}}" class="himAvatorSrc"></image>
			</view>
		</view>
		</view>
	</scroll-view>
	<!-- 输入框 -->
   <view class="sendBar">
	<view class="sendBar-footer">
		<view class="button-term">
			<text class="buttonText">常用语</text>
		</view>
		<input type="text" model:value="{{inputMessage}}" class="input" placeholder=" 新信息" />
		<view class="button" bindtap="sendMess">
			<text class="iconfont icon-biaoqing"></text>
			<text class="iconfont icon-tupian_huaban"></text>
		</view>
	</view>
	</view>

css 部分：

.root {
     width: calc(97% - -2px);
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 15rpx;
}
 
.sv {
	/* background-color: white; */
    width: 100%;
	/* height: 80vh; */
}
 .sendBar {
          width: 100%;
		  height: 38px;
 		  position: fixed; 
 		  bottom: 0rpx; 
 		  /* right: 0rpx; */ 
 		  margin: 0 auto;
 		  border: none;
 		  z-index: 1000;
		  /* border: 2px solid #1E90FF; */
		  background-color: #fff;
		  padding-top: 8px;
		  padding-bottom: 4px;
 }
.sendBar-footer {
     width: 100%;
	/* height: 100vh; */
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
 
.input {
	background-color: #efefef;
	border: 1px solid #efefef;
	height: 30px;
	width: 210px;
	border-radius: 7%;
	margin-left: 10px;
}
.box-item{
	width: 100%;
	margin-bottom: 50px;
}
 
.box {
	width: 100%;
	display: flex;
	flex-direction: row;
	margin-top: 2px;
	margin-bottom: 10px;
}
 
.item {
	/* background-color: white; */
	width: 100%;
	min-height: 50px;
	display: flex;
	flex-direction: row;
	align-items: center;
}
 
.mineText {
	font-size: 12px;
	color: white;
}
 
.himText {
	font-size: 12px;
	color: white;
}
 
.adText {
	position: absolute;
	margin: auto;
	right: 20px;
}
 
.button {
	/* background-color: #9380eb; */
	width: 60px;
	height: 28px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin-left: 10rpx;
	color: #a6a6a6;
}
 
.buttonText {
	font-size: 14px;
	color: white;
}
 
.mineAvatorSrc {
	height: 45px;
	width: 45px;
  position: relative;
  margin-left: 20rpx;
  border-radius: 50%;
}
 
.himAvatorSrc {
	height: 45px;
	width: 45px;
	position: relative;
	right: 20rpx;
	border-radius: 50%;
}
 
.mineTextBox {
	background-color: #9380eb;
	max-width: 50%;
	border-radius: 15rpx;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 0px;
	padding-bottom: 5px;
	margin: auto;
	margin-left: 15rpx;
	display: block;
	text-overflow:ellipsis;
	word-wrap:break-word;
}
 
.himTextBox {
	background-color: #9380eb;
	max-width: 50%;
	border-radius: 15rpx;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 0px;
	padding-bottom: 5px;
	margin: auto;
	margin-right: 35rpx;
	display: block;
	text-overflow:ellipsis;
	word-wrap:break-word;
}

/* 常用语 */
.button-term {
	background-color: #9380eb;
	width: 60px;
	height: 28px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	/* margin-right: 23px; */
	border-radius: 7%;
}
.data-mess{
	/* background-color: #8f939c; */
	text-align: center;
	max-width: 50%;
	border-radius: 15rpx;
	color: #b8b6ad;
	margin: auto;
	display: block;
	text-overflow:ellipsis;
	word-wrap:break-word;
	margin-top: 5px;
	font-size: 14px;
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 27px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

js部分：

// pages/chatsa/vipCategoryDetail/vipCategoryDetail.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
	    mess : '',
		data:'16:50',
	    content : [{
			id:1,
				text:'请问还在看机会吗?'
		},{
			id:0,
		  text:'您好,还在看',
		},{
			id:1,
				text:'是不是本人?'
		},{
			id:0,
		  text:'是的',
		},{
			id:1,
				text:'家住哪里'
		},{
			id:0,
		  text:'吉林长春',
		},{
			id:1,
				text:'什么学校毕业'
		},{
			id:0,
		  text:'长春财经学院',
		},],//聊天信息
	    mineAvatorSrc : 'https://jiahuizhaopin.oss-cn-beijing.aliyuncs.com/jpgrtet_08.jpg',
	    himAvatorSrc : 'https://jiahuizhaopin.oss-cn-beijing.aliyuncs.com/jpgrtet_08.jpg',
		inputMessage:''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },
  sendMess(){
  }
})