uniapp 封装listcell并设置点击事件

Uniapp 中可以使用组件来封装 ListCell，并在组件中设置点击事件。以下是示例代码：

1. 创建一个自定义组件，例如 MyListCell.vue。

<template>
  <view class="my-list-cell" @click="handleClick">
    <text>{{ title }}</text>
    <text>{{ content }}</text>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick() {
      // 处理点击事件
      this.$emit('click', { title: this.title, content: this.content })
    }
  }
}
</script>

<style>
.my-list-cell {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
</style>

2. 在页面中使用 MyListCell 组件，并监听点击事件。

<template>
  <view>
    <my-list-cell v-for="(item, index) in list" :key="index" :title="item.title" :content="item.content" @click="handleCellClick"></my-list-cell>
  </view>
</template>

<script>
import MyListCell from '@/components/MyListCell'

export default {
  components: {
    MyListCell
  },
  data() {
    return {
      list: [
        { title: '标题1', content: '内容1' },
        { title: '标题2', content: '内容2' },
        { title: '标题3', content: '内容3' }
      ]
    }
  },
  methods: {
    handleCellClick(data) {
      console.log('点击了列表项：', data)
    }
  }
}
</script>

在以上代码中，MyListCell 组件接收两个 props：title 和 content，用于渲染列表项的标题和内容。组件内部监听了点击事件，并通过 $emit 方法触发了一个自定义事件 click，将当前列表项的 title 和 content 作为参数传递出去。在页面中使用 MyListCell 组件时，通过 v-for 循环渲染出多个列表项，并通过 @click 监听了组件的点击事件，触发了 handleCellClick 方法。在 handleCellClick 方法中，可以处理点击事件并获取到当前列表项的数据。