- 點(diǎn)擊
v-for出來的元素，跳轉(zhuǎn)頁面
- 給元素定義一個(gè)
click點(diǎn)擊事件，跳轉(zhuǎn)頁面用到動(dòng)態(tài)路由
-
tamplate
@click="toDetailPage(item)"
toDetailPage(item) {
this.$router.push("/chatDetail/1")
}
-
新建頁面
- 在
src/views新建文件夾chatDetail，在chatDetail文件夾下新建index.vue文件
<template>
<div>chatDetail</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
</style>
-
配置路由
- 打開
src/router/router.config.js，在children數(shù)組內(nèi)配置路由，記得使用動(dòng)態(tài)路由
{
path: '/chatDetail/:id',
name: 'ChatDetail',
component: () => import('@/views/chatDetail/index'),
meta: { title: '聊天詳情', keepAlive: false,showFoot: false }
}
-
配置白名單 ps:暫時(shí)跳到一個(gè)固定的頁面
- 打開
src/permission.js，把要跳轉(zhuǎn)的路由填寫到白名單內(nèi)
const whiteList = ['/login','/home','/chatDetail/1'] // no redirect whitelist
- 現(xiàn)在點(diǎn)擊好友列表就可以跳轉(zhuǎn)過去了
- 頁面分析：
- 分【上、中、下】 三個(gè)板塊，第一板塊是
navbar、第二板塊是中心區(qū)域，可以上下滾動(dòng)，第三板塊是底部發(fā)語音，發(fā)信息，發(fā)表情的區(qū)域，先布局
<template>
<div class="chatDetail">
<div class="top">
<van-nav-bar title="如來佛祖" left-text="返回" left-arrow>
<template #right>
<van-icon name="weapp-nav" size="18" />
</template>
</van-nav-bar>
</div>
<div class="center">
<p v-for="(item, index) in 30" :key="index">{{ index }}</p>
</div>
<div class="bottom">我是發(fā)言區(qū)域</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.chatDetail {
width: 100%;
height: 100vh;
background: pink;
.center {
background: #fe8130;
height: calc(100% - 184px);
overflow: auto;
}
.bottom {
height: 92px;
background: red;
position: fixed;
bottom: 0;
width: 100%;
}
}
</style>
- 開發(fā)一左一右兩種樣式，然后根據(jù)類型type來區(qū)分是自己發(fā)的消息 還是 對(duì)方發(fā)來的消息
- 最好還是把中間的聊天記錄區(qū)域，抽離成組件
- 在
src/components文件夾下新建一個(gè)組件ChatList.vue
<template>
<div>聊天區(qū)域</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
</style>
//引入
import ChatList from '@/components/ChatList.vue'
//注冊(cè)
components: { ChatList },
//使用
<chat-list></chat-list>
- 下面在
ChatList組件內(nèi)開發(fā)
template
<template>
<div class="chatList">
<ul>
<!-- 左側(cè) -->
<li>
<div class="left">
<img src="http://erkong.ybc365.com/pic/16283350133805.gif" alt="">
</div>
<div class="right">
<p class="time">10:23:45</p>
<p class="content">
我要去和學(xué)弟吃飯了～
</p>
</div>
</li>
<!-- 右側(cè) -->
<li class="r">
<div class="right">
<p class="time">10:25:46</p>
<p class="content">
你想去就去吧，不能喝酒！
</p>
</div>
<div class="left">
<img src="https://upload.jianshu.io/users/upload_avatars/14379901/cf9da23c-2bbc-47bf-9076-0612df3e5f46.jpg" alt="">
</div>
</li>
</ul>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.chatList{
ul{
padding: 20px;
box-sizing: border-box;
li{
display: flex;
margin-bottom: 40px;
.left{
width: 92px;
height: 92px;
margin-right: 16px;
img{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.right{
flex: 1;
p{
margin: 0;
}
p.time{
font-size: 24px;
margin-bottom: 8px;
}
p.content{
font-size: 28px;
background: #00ccb8;
padding: 12px;
border-radius: 12px;
color:#fff;
display: inline-block;
}
}
}
li.r{
p.time{
text-align: right;
}
p.content{
background: #f37d7d;
text-align: left;
}
.left{
margin-left: 16px;
margin-right: 0;
}
.right{
text-align: right;
}
}
}
}
</style>
- 下面把聊天記錄換成模擬的假數(shù)據(jù)
- data
data() {
return {
list:[
{
avatar:"http://erkong.ybc365.com/pic/16671015266174.jpeg",
timer:"10:23:34",
message:"我要去和學(xué)弟吃飯了～",
type:1
},
{
avatar:"http://erkong.ybc365.com/pic/16283350133805.gif",
timer:"10:33:34",
message:"想去就去吧，不要喝酒就是了",
type:2
},
]
}
},
<template>
<div class="chatList">
<ul>
<template v-for="(item,index) in list" >
<!-- 左側(cè) -->
<li v-if="item.type==1" :key="index">
<div class="left">
<img :src="item.avatar" alt="">
</div>
<div class="right">
<p class="time">{{item.timer}}</p>
<p class="content">
{{item.message}}
</p>
</div>
</li>
<!-- 右側(cè) -->
<li class="r" v-if="item.type==2" :key="index">
<div class="right">
<p class="time">{{item.timer}}</p>
<p class="content">
{{item.message}}
</p>
</div>
<div class="left">
<img :src="item.avatar" alt="">
</div>
</li>
</template>
</ul>
</div>
</template>
- 聊天記錄部分的靜態(tài)頁面開發(fā)完成?。?！
- 下面開發(fā)底部的發(fā)消息區(qū)域
- 打開
chatDetail/index.vue，在<div class="bottom">我是發(fā)言區(qū)域</div>里面開發(fā)
-
template
<div class="bottom">
<div class="left">
<van-icon name="http://erkong.ybc365.com/5f28d202201141346467740.png" size="25"></van-icon>
</div>
<div class="input">
<van-search v-model="value" placeholder="請(qǐng)輸入要發(fā)送的消息">
<template #left-icon>
<van-icon name=""></van-icon>
</template>
</van-search>
</div>
<div class="right">
<div class="biaoqing">
<van-icon name="http://erkong.ybc365.com/pic/16671025829044.png" size="25"></van-icon>
</div>
<div class="send">
<span>發(fā)送</span>
</div>
</div>
</div>
.bottom {
height: 92px;
// background: red;
position: fixed;
bottom: 0;
width: 100%;
display: flex;
align-items: center;
padding: 0 20px;
box-sizing: border-box;
.left {
display: flex;
}
.input {
flex: 1;
padding: 0 20px;
::v-deep .van-search {
padding: 0;
}
}
.right{
display: flex;
align-items: center;
.biaoqing{
display: flex;
}
.send{
font-size: 28px;
padding: 12px 0 12px 24px;
}
}
}
