帮忙用uniapp 一个左边是图片，帮忙是网站描述的书单介绍

当然可以帮助你创建一个包含左侧图片和右侧文本描述的书单介绍组件。这里是一个简单的示例，你可以根据自己的需求进行调整。

步骤 1: 安装 uView UI (如果尚未安装)

如果你还没有安装 uView UI 组件库，可以通过 HBuilderX 的插件市场安装，或者手动下载并引入到项目中。

步骤 2: 创建组件文件

创建一个新的 .vue 文件（例如 BookItem.vue），并在其中编写如下代码：

BookItem.vue

<template>
  <view class="book-item">
    <image :src="item.image" mode="aspectFill" lazy-load class="book-image"></image>
    <view class="book-description">
      <view class="book-title">{{ item.title }}</view>
      <view class="book-author">{{ item.author }}</view>
      <view class="book-summary">{{ item.summary }}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true,
    },
  },
};
</script>

<style scoped>
.book-item {
  display: flex;
  padding: 10rpx;
  background-color: #fff;
  margin-bottom: 10rpx;
}

.book-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
}

.book-description {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.book-title {
  font-size: 36rpx;
  color: #333;
  font-weight: bold;
}

.book-author {
  font-size: 28rpx;
  color: #666;
  margin-top: 10rpx;
}

.book-summary {
  font-size: 28rpx;
  color: #999;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 显示三行文字 */
  -webkit-box-orient: vertical;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

步骤 3: 使用组件

在你的页面文件中引入并使用 BookItem 组件：

Page.vue

<template>
  <view class="page-container">
    <scroll-view scroll-y :style="{ height: windowHeight + 'px' }">
      <book-item v-for="(item, index) in bookList" :key="index" :item="item"></book-item>
    </scroll-view>
  </view>
</template>

<script>
import BookItem from './BookItem.vue';

export default {
  components: {
    BookItem,
  },
  data() {
    return {
      bookList: [
        {
          image: 'https://example.com/book1.jpg',
          title: '书名1',
          author: '作者1',
          summary: '这是书名1的简介，一段简短的文字描述这本书的内容，包括主要人物、故事情节等。',
        },
        {
          image: 'https://example.com/book2.jpg',
          title: '书名2',
          author: '作者2',
          summary: '这是书名2的简介，一段简短的文字描述这本书的内容，包括主要人物、故事情节等。',
        },
        // 更多书籍...
      ],
      windowHeight: 0,
    };
  },
  onLoad() {
    this.windowHeight = uni.getSystemInfoSync().windowHeight;
  },
};
</script>

<style>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

在这个示例中，我们使用了 BookItem 组件来显示每个书籍的图片和描述。通过循环遍历 bookList 数组，我们可以为每本书生成一个 BookItem 组件实例。

请注意，你需要替换示例中的图片 URL 和书籍信息为实际的数据。此外，为了适应不同的屏幕尺寸，我们获取了系统的窗口高度，并将其应用于滚动视图的高度。

如果你需要进一步的帮助或者有其他具体的需求，请告诉我！