magazine-web/components/list.vue

<template>
  <view class="list">
    <uni-card padding="0" spacing="0" type="line">
      <view v-if="!titleImg">
        <template v-slot:title>
          <uni-list>
						<uni-list-item :title="name"/>
					</uni-list>
        </template>
      </view>
      <view v-if="titleImg">
        <template v-slot:cover>
          <view class="custom-cover">
            <image class="cover-image" mode="aspectFill" :src="cover">
            </image>
            <view class="cover-content">
              <text class="uni-subtitle uni-white">{{ name }}</text>
            </view>
          </view>
        </template>
      </view>
      <uni-list>
        <uni-list-item v-for="(item, index) in data" :key="index" :title="item.title" showArrow
          @click="onClick"
          :thumb="`${baseurl}${item.thumbnail}`"
          thumb-size="lg" rightText="详情" />
      </uni-list>
    </uni-card>
  </view>
</template>

<script>
export default {
  props: {
    // 数据内容
    data: { type: Array, default: () => [] },
    name: { type: String, default: '默认title' },
    // 是否启用图片卡片
    titleImg: { type: Boolean, default: false },
    // 图片地址
    cover: { type: String, default: '' }
  },
  computed: {},
  data() {
    return {
      baseurl: 'http://192.168.3.45:9002',
    };
  },
  async mounted() {},
  methods: {
    async onClick(e) {
      console.log(e);
    }
  },
};
</script>
<style lang="scss" scoped>
.cover-image {
  width: 100%;
  height: 150px;
}
.cover-content {
  position: absolute;
  top: 35%;
  width: 100%;
  background: #000;
  opacity: 0.5;
}
.uni-subtitle {
  line-height: 30px;
  margin-left: 10px;
}
.list {
  margin-top: 15px;
}
</style>