小程序聊天页面快速开发

需求：快速开发一个聊天页面

直接上代码如下

html代码

<view class="box">

	<view class="doctor">
		<view style="width:60px;">
			<image src="/images/u1.png">image>
		view>
		<view>
			<view class="doctor-content"><text>你好!text>view>
		view>
	view>
	

	<view class="user" style="margin-top:40rpx;">
		<view style="width:60px;">
			<image src="/images/u2.png">image>
		view>
		<view>
			<view class="user-content"><text>李医生你好！text>view>
		view>

	view>

	

	<view class="doctor" style="margin-top:40rpx;">
		<view style="width:60px;">
			<image src="/images/u1.png">image>
		view>
		<view>
			<view class="doctor-content"><text>请问你需要咨询什么呢？text>view>
		view>
	view>

	

	<view class="user" style="margin-top:40rpx;">
		<view style="width:60px;">
			<image src="/images/u2.png">image>
		view>
		<view>
			<view class="user-content"><text>我最近睡眠有点不好text>view>
		view>
	view>
view>


<view class="botoom">
	<view class="input">
		<input style="width:75%;">input>
		<view>发送view>
	view>
	<view class="tools">
		<image src="{{flag?'/images/yuyin2.png':'/images/yuyin.png'}}" bindtap="yuyin">image>
		<image src="{{flag?'/images/photo.png':'/images/photo2.png'}}" bindtap="photo">image>
	view>
	<block wx:if="{{flag}}">
		<view class="checkImage">
			<image src="/images/img.png" mode="widthFix">image>
			<image src="/images/img.png" mode="widthFix">image>
			<image src="/images/img.png" mode="widthFix">image>
		view>
		<view class="tool2">
			<view>相册view>
			<view>编辑view>
		view>
	block>
	<block wx:else>
		<view style="background-color: white; height:2000px">
			<view style="height:20rpx;"> view>
			<view style=" text-align: center;  ">按住说话view>
			<view class="say">
				<image src="/images/yuyin.png">image>
			view>
			<view style=" text-align: center;">
				<text>变声text>
				<text style="margin-left:20rpx;   font-weight: bold;">对讲text>
				<text style="margin-left:20rpx;">录音text>
			view>
		view>

	block>
view>

CSS代码

/* pages/index.wxss */
.box{
    box-sizing: border-box;
    margin-left: 20rpx;
}
.doctor {
  display: flex;
  align-items: center;
}

.doctor image {
  width: 50px;
  height: 50px;

}

.doctor-content {
  margin-left: 20rpx;
  background-color: #E4E4E4;
  padding: 20rpx 30rpx;
  border-radius: 50rpx;
 
}



.user {
  /* margin-right: 20rpx; */
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.user image {
  width: 50px;
  height: 50px;

}

.user-content {
  margin-right: 20rpx;
  background-image: linear-gradient(to right, #AE99F8 , #559DE5);
  padding: 20rpx 30rpx;
  border-radius: 50rpx;
}


.botoom{
  position: fixed;
  bottom: 0;
  margin: 0;
  height: 280px;
  width: 100%;
  background-color: #F2F2F2;
}
.input{
  display: flex;
  align-items: center;
}
.input input{
  margin: 20rpx;
  padding: 10rpx;
  border-radius: 50rpx;
  background-color: white;
}
.input view{
  background-image: linear-gradient(to right, #B2AEF5 , #B5D2EC);
  padding: 15rpx 30rpx;
  border-radius: 50rpx;
}
.tools {
  margin-left: 10rpx;
}
.tools image{
  width: 60rpx;
  margin-left: 10rpx;
  height: 60rpx;
}
.checkImage{

}

.checkImage image{
  width: 33%;
}
.tool2{
  display: flex;
}
.tool2 view{
  margin:10rpx 20rpx;
}
.say{
  display: flex;
  justify-content: center;
  align-items: center;
  margin:50rpx;
}
.say image{
  width: 130rpx;
  height: 130rpx;

}

JS代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    flag:false
  },
  yuyin(){
      this.setData({
        flag:!this.data.flag
      })
  },
  photo(){
    this.setData({
      flag:!this.data.flag
    })
  }

})