代码拉取完成，页面将自动刷新
uniCloud 是 DCloud 联合阿里云、腾讯云，为开发者提供的基于 serverless 模式和 js 编程的云开发平台，更多请参考uniCloud文档。
过去，开发一个列表，需要在后端设计数据库，提供接口，前端写列表，处理分页、下拉刷新，并保证长列表的性能，全套工作下来需要1、2天。
现在有了云端一体列表，上述工作都不用做了，页面拿来就用。
在HBuilderX 2.9+，新建页面时，可以直接选择大量云端一体页面模板，数据库、后台接口、前端页面都有了。
当然，您也可以调整，自定义数据库表和前端的ui。
后台数据表使用 openDB 设计规范，它约定了一个标准用户表的表名和字段定义，并且基于nosql的特性，可以由开发者自行扩展字段。openDB是uniCloud的重要软基建，支撑uniCloud数字生态的发展。
这是基于 uni-list 扩展的云端一体的商品列表页面模版。
本模版有如下特征：
uni-ui 框架的 uni-list 组件扩展openDB 的 opendb-mall-goods结构Tips
创建uniCloud云开发环境并选择服务商uniCloud目录上右键选择关联云服务空间或项目并选择服务空间uniCloud > database > db_init.json 文件，右键选择初始化云数据库，等待初始化完成。数据结构参考 openDB 的opendb-mall-goods表结构代码逻辑以及样式见代码示例
<uni-list>
<uni-list-item :border="!waterfall" class="uni-list-item--waterfall" title="自定义商品列表" v-for="item in lists" :key="item._id">
<template v-slot:header>
<view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': waterfall }">
<image :src="item.goods_thumb" mode="aspectFill"></image>
</view>
</template>
<view slot="body" class="shop">
<view>
<view class="uni-title">
<text class="uni-ellipsis-2">{{ item.name }}</text>
</view>
<view>
<text class="uni-tag hot-tag">{{ item.goods_tip }}</text>
<text v-for="tag in item.tag" :key="tag" class="uni-tag">{{ tag }}</text>
</view>
</view>
<view>
<view class="shop-price">
<text>¥</text>
<text class="shop-price-text">{{ item.goods_price }}</text>
<text>.00</text>
</view>
<view class="uni-note">{{ item.comment_count }}条评论 月销量 {{ item.month_sell_count }}</view>
<view class="uni-note ellipsis">
<text class="uni-ellipsis-1">{{ item.shop_name }}</text>
<text class="uni-link">进店 ></text>
</view>
</view>
</view>
</uni-list-item>
</uni-list>
模板中通过 common/uni-ui.scss 定义了一些标题、图片等的基础样式
如果以上排版不能满足需求或者需要调整现有排版的样式，直接修改或覆盖对应样式即可。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手