<!-- 使用 type="home" 属性设置首页,其他页面不需要设置,默认为page -->
<route lang="jsonc" type="home">
{
"layout": "default",
"style": {
// 'custom' 表示开启自定义导航栏,默认 'default'
"navigationStyle": "custom",
"navigationBarTitleText": "问题咨询"
}
}
</route>
<script lang="ts" setup>
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
import { tabbarTabsOption } from './options'
const chatList = ref<any>([
{
id: 1,
nodes: `
<div>
<div class="mb-10rpx ">
<a dataClick="handleListClick" > 1 </a>
</div>
<div class="mb-10rpx ">
<a dataClick="handleListClick" > 2 </a>
</div>
<div class="mb-10rpx ">
<a dataClick="handleListClick" > 3 </a>
</div>
</div>
`,
isMe: false,
},
{
id: 2,
nodes: '您好',
isMe: true,
},
])
function handleListClick(textContent: string) {
console.log('列表点击', textContent)
}
function handleDynamicClick(e: any) {
const clickType = {
handleListClick,
}
clickType[e.dataclick](e.innerText)
}
</script>
<template>
<view class="h-screen flex flex-col overflow-hidden">
<view class="h-820rpx overflow-y-auto">
<view
v-for="(item, index) in chatList" :key="index" class="flex"
:class="{ 'mb-[32rpx]': index < chatList.length - 1, 'justify-end': item.isMe }"
>
<view v-if="!item.isMe" class="rounded-20rpx bg-#fff p24rpx">
<mp-html :content="item.nodes" @linktap="handleDynamicClick" />
</view>
<view
v-if="item.isMe" class="inline-block rounded-20rpx p24rpx text-28rpx text-#fff"
style="background: linear-gradient( 315deg, #3CBD60 0%, #60CC40 100%);"
>
<mp-html :content="item.nodes" @linktap="handleDynamicClick" />
</view>
</view>
</view>
</view>
</template>
<style lang="scss" scoped></style>