仿微信聊天页面源码

<view>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

</view>

<!-- <view class="flexbox">

</view> -->

</view>

</template>

export default {

data() {

return {

isjia: true,

issend: false,

messages: '',

istextarea: true,

isbutton: false,

isjp: false,

isyy: true,

isbox2: false,

isdown: false,

list1: [

{

msg1: '这是第1条测试数据'

}

list2: [

{

msg2: '这是第1条测试数据'

{

msg2: '这是第2条测试数据'

}

]

};

methods: {

// 点击键盘

changejp() {

this.isjp = !this.isjp;

this.isyy = !this.isyy;

this.isbutton = !this.isbutton;

this.istextarea = !this.istextarea;

// 点击语音

changeyy() {

this.isjp = !this.isjp;

this.isyy = !this.isyy;

this.isbutton = !this.isbutton;

this.istextarea = !this.istextarea;

// 改变加号弹出相机

changejia() {

this.isbox2 = true;

this.isdown = true;

this.isjia = false;

changedown() {

this.isbox2 = false;

this.isdown = false;

this.isjia = true;

// changefocus() {

// this.isjia = !this.isjia;

// this.issend = !this.issend;

// },

// changeblur() {

// this.isjia = !this.isjia;

// this.issend = !this.issend;

// },

// 发送信息

sendmsg(msg) {

console.log(msg);

console.log(this.messages);

let lists = {

msg1: this.messages

};

this.list1.push(lists);

this.messages = '';

this.isjia = true;

this.issend = false;

changeicon(data) {

let sum = data.detail.value.length;

if (sum > 0) {

this.isjia = false;

this.issend = true;

} else {

this.isjia = true;

this.issend = false;

}

onLoad() {

// if(this.messages.value.length>0){

// this.isshow=false

// }

}

};

</script>

<style>

.fixbox {

position: fixed;

width: 100%;

height: auto;

padding: 20rpx 0rpx 20rpx 20rpx;

box-sizing: border-box;

bottom: 0;

/* display: flex; */

/* align-items: center; */

background-color: #c8c7cc;

}

.fixbox1 {

/* position: fixed; */

width: 100%;

height: auto;

/* padding: 20rpx 0rpx 20rpx 20rpx; */

/* box-sizing:border-box; */

/* bottom: 0; */

display: flex;

align-items: center;

/* background-color: #C8C7CC; */

}

.bottom-area {

height: 300rpx;

background-color: #c8c7cc;

}

.pic-yy {

width: 10%;

height: 20%;

float: left;

/* background-color: #007AFF; */

}

.pic-yy2 {

width: 10%;

height: 20%;

float: left;

/* background-color: #007AFF; */

}

.pic-yy-img {

width: 50rpx;

height: 50rpx;

}

.msg {

width: 75%;

float: left;

background-color: #ffffff;

border-radius: 5rpx;

}

.msg-info {

width: 100%; /*自动适应父布局宽度*/

overflow: auto;

word-break: break-all;

height: 50rpx;

}

.msg-info2 {

width: 100%; /*自动适应父布局宽度*/

/* overflow:auto;

word-break:break-all; */

height: 50rpx;

font-size: 20rpx;

line-height: 50rpx;

}

.pic-jia {

width: 10%;

float: left;

margin-left: 5%;

/* background-color: #4CD964; */

}

.pic-jia-img {

width: 40rpx;

height: 40rpx;

}

.flexbox {

width: 100%;

display: flex;

padding: 3% 0rpx;

justify-content: space-between;

box-sizing: border-box;

}

.flex1 {

width: 25%;

height: 25%;

text-align: center;

/* line-height: 20%; */

/* margin-left: 8%; */

/* padding: 6% 0rpx; */

}

.flex1-top {

width: 50%;

height: 50%;

border-radius: 15rpx;

background-color: #ffffff;

line-height: 50%;

padding: 2%;

margin: 0 auto;

}

.flex1-img {

width: 60rpx;

height: 60rpx;

/* line-height: 70rpx; */

}

.flex1-text {

text-align: center;

font-size: 25rpx;

margin-top: 5rpx;

}

.msgbox {

}

.msgleft {

display: flex;

align-items: center;

margin-top: 1%;

}

.msg-imgbox {

width: 10%;

height: 10%;

margin: 0% 3%;

}

.msg-img {

width: 100rpx;

height: 100rpx;

border-radius: 10rpx;

}

.msg-text {

max-width: 80%;

/* width: 80%;

*/ /* margin: 20rpx; */

display: inline-block;

/* width: 480rpx; */

/* margin-left: 30rpx; */

overflow-wrap: break-word;

white-space: normal;

}

.msg-textarea {

padding: 2%;

border-radius: 10rpx;

background-color: #4cd964;

height: auto;

width: 95%;

white-space: wrap;

overflow: hidden;

padding: 10rpx;

/* text-overflow: ellipsis; */

display: -webkit-box;

-webkit-line-clamp: 50; // 控制多行的行数

/* -webkit-box-orient: vertical; */

}

.msgright {

display: flex;

align-items: center;

justify-content: flex-end;

margin-top: 2%;

box-sizing: border-box;

}

.msg-imgbox2 {

width: 10%;

height: 10%;

margin: 0% 3%;

}

.msg-img2 {

width: 100rpx;

height: 100rpx;

border-radius: 10rpx;

}

.msg-text2 {

/* width: 80%; */

/* min-height: 50%; */

max-width: 80%;

/* margin: 20rpx; */

display: inline-block;

/* width: 480rpx; */

/* margin-left: 30rpx; */

overflow-wrap: break-word;

white-space: normal;

}

.msg-textarea2 {

padding: 2%;

border-radius: 10rpx;

background-color: #4cd964;

height: auto;

width: 95%;

white-space: wrap;

overflow: hidden;

padding: 10rpx;

/* text-overflow: ellipsis; */

display: -webkit-box;

-webkit-line-clamp: 50; // 控制多行的行数

/* -webkit-box-orient: vertical; */

}

</style>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 218,607评论 6赞 507
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,239评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,960评论 0赞 355
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,750评论 1赞 294
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,764评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,604评论 1赞 305
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,347评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,253评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,702评论 1赞 315
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,893评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 40,015评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,734评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,352评论 3赞 330
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,934评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,052评论 1赞 270
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,216评论 3赞 371
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,969评论 2赞 355

仿微信聊天页面源码

推荐阅读更多精彩内容