仿微信聊天頁面源碼

<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條測試數(shù)據(jù)'

}

list2: [

{

msg2: '這是第1條測試數(shù)據(jù)'

{

msg2: '這是第2條測試數(shù)據(jù)'

}

]

};

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;

// },

// 發(fā)送信息

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%; /*自動適應(yīng)父布局寬度*/

overflow: auto;

word-break: break-all;

height: 50rpx;

}

.msg-info2 {

width: 100%; /*自動適應(yīng)父布局寬度*/

/* 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; // 控制多行的行數(shù)

/* -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; // 控制多行的行數(shù)

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

}

</style>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末述吸，一起剝皮案震驚了整個濱河市忿族，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌蝌矛，老刑警劉巖道批，帶你破解...
沈念sama閱讀 222,681評論 6贊 517
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異入撒，居然都是意外死亡隆豹，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 95,205評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門茅逮，熙熙樓的掌柜王于貴愁眉苦臉地迎上來璃赡，“玉大人，你說我怎么就攤上這事献雅〉锟迹” “怎么了？”我有些...
開封第一講書人閱讀 169,421評論 0贊 362
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵挺身，是天一觀的道長侯谁。經(jīng)常有香客問我，道長瞒渠，這世上最難降的妖魔是什么良蒸？我笑而不...
開封第一講書人閱讀 60,114評論 1贊 300
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮伍玖，結(jié)果婚禮上嫩痰，老公的妹妹穿的比我還像新娘。我一直安慰自己窍箍，他們只是感情好串纺，可當(dāng)我...
茶點故事閱讀 69,116評論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著椰棘，像睡著了一般纺棺。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上邪狞，一...
開封第一講書人閱讀 52,713評論 1贊 312
城市分裂傳說
那天祷蝌，我揣著相機與錄音，去河邊找鬼帆卓。笑死巨朦，一個胖子當(dāng)著我的面吹牛米丘，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播糊啡，決...
沈念sama閱讀 41,170評論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼拄查，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了棚蓄？” 一聲冷哼從身側(cè)響起堕扶，我...
開封第一講書人閱讀 40,116評論 0贊 277
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎梭依，沒想到半個月后稍算，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 46,651評論 1贊 320
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡睛挚，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,714評論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年邪蛔，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片扎狱。...
茶點故事閱讀 40,865評論 1贊 353
活死人
序言：一個原本活蹦亂跳的男人離奇死亡侧到，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出淤击，到底是詐尸還是另有隱情匠抗，我是刑警寧澤，帶...
沈念sama閱讀 36,527評論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布污抬，位于F島的核電站汞贸，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏印机。R本人自食惡果不足惜矢腻，卻給世界環(huán)境...
茶點故事閱讀 42,211評論 3贊 336
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望射赛。院中可真熱鬧多柑，春花似錦、人聲如沸楣责。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,699評論 0贊 25
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽秆麸。三九已至初嘹，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間沮趣，已是汗流浹背屯烦。一陣腳步聲響...
開封第一講書人閱讀 33,814評論 1贊 274
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人漫贞。一個月前我還...
沈念sama閱讀 49,299評論 3贊 379
代替公主和親
正文我出身青樓甸箱，卻偏偏與公主長得像，于是被迫代替她去往敵國和親迅脐。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,870評論 2贊 361

仿微信聊天頁面源碼

推薦閱讀更多精彩內(nèi)容