• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

DCloud/uni-ui-ext

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

uni-ui-ext

开源软件地址:

https://gitee.com/dcloud/uni-ui-ext

开源软件介绍:


页面模板简介

列表是我们在项目开发中常见的一个需求,对于基础列表 uni-list 组件已经提供了大部分常见的功能。

但是如果我们想要实现一个复杂的新闻列表,难免需要我们去实现不同的复杂列表布局,例如一些图文混排、左图右文、右图左文、大图略缩图、多图略缩图等多种不同排版组合,同时我们可能还需要应对不同的数据展示。

那么现在我们给大家提供了一个基于 uni-list 组件的云端一体化新闻列表页面模板,帮大家快速构建一个复杂多变的新闻列表。

目前已经实现的页面模板

  1. 云端一体混合布局:https://ext.dcloud.net.cn/plugin?id=2546
  2. 云端一体垂直布局,大图模式:https://ext.dcloud.net.cn/plugin?id=2583
  3. 云端一体垂直布局,多行图文混排:https://ext.dcloud.net.cn/plugin?id=2584
  4. 云端一体垂直布局,多图模式:https://ext.dcloud.net.cn/plugin?id=2585
  5. 云端一体水平布局,左图右文:https://ext.dcloud.net.cn/plugin?id=2586
  6. 云端一体水平布局,左文右图:https://ext.dcloud.net.cn/plugin?id=2587
  7. 云端一体垂直布局,无图模式,主标题+副标题:https://ext.dcloud.net.cn/plugin?id=2588

云端一体页面的优势是什么

过去,开发一个列表,需要在后端设计数据库,提供接口,前端写列表,处理分页、下拉刷新,并保证长列表的性能,全套工作下来需要1、2天。

现在有了云端一体列表,上述工作都不用做了,页面拿来就用。

在HBuilderX 2.9+,新建页面时,可以直接选择大量云端一体页面模板,数据库、后台接口、前端页面都有了。

当然,您也可以调整,自定义数据库表和前端的ui。

后台数据表

后台数据表使用 openDB 设计规范,它约定了一个标准用户表的表名和字段定义,并且基于nosql的特性,可以由开发者自行扩展字段。openDBuniCloud的重要软基建,支撑uniCloud数字生态的发展。

页面模板做了哪些事情:

  • 通过 openDBopendb-news-articles表规范表结构
  • 基于 uni-clientdb 组件操作数据库
  • 实现常见的六种新闻列表排版,减少实现同类需求构建代码的工作量
  • 实现简单的下拉刷新,上拉加载

Tips

  • 暂不支持 nvue 页面

使用说明

当前模板是在 uni-list 组件基础上,通过插槽的方式实现了不同的新闻列表排版,同时使用了 uni-clientDB 完成了云端一体化。大大减少了大家的的代码开发时间。

  1. uniCloud > database > db_init.json 文件,右键初始化数据库,数据结构参考 openDBopendb-news-articles表结构
  2. 运行到 Chrome 查看效果

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap