培训小程序首页开发

简介: 培训小程序首页开发

我们本篇来开发一下我们小程序的首页,先看一下原型

1 定义变量

因为我们首页展示的分类信息,现在分类信息已经存到了数据源里,我们要通过变量读取出来。

先打开我们创建的自定义应用,在代码区点击新建,创建一个数据表查询

数据表选择分类,方法选择查询列表

2 欢迎语搭建

变量定义好之后就要考虑组件搭建,页面的话我们头部添加一个背景图,中间部分用图标加文字的形式展示

想添加一个普通容器作为背景

设置高度为250px,背景为图片背景

在添加一个普通容器用来放置我们的欢迎语,高度设置为149px

继续添加一个普通容器,用来显示文本,设置40px的内边距

里边添加两个文本组件

修改文本组件的内容,设置12px的内边距,设置第一个文本组件的文本格式为H4

3 分类导航搭建

选中最外层的普通容器,添加一个普通容器来放置我们的分类信息

设置一定的背景色和圆角

继续添加一个普通容器,宽设置为94%,外边距为auto,这样就让普通容器居中显示

self {
    width: 94%;
    margin-right: auto;
    margin-left: auto;
    padding-top: 50px;
    padding-right: 7.5px;
    padding-left: 7.5px
}

普通容器里添加一个数据列表,数据源选择分类,模板选择图文列表

先精简一下组件,只保留图片和文本组件

然后将边框的样式去掉

然后给普通容器绑定背景色

现在组件之间有点挤,设置一点下外边距

4 搭建底部导航

首页部分我们需要有一个底部导航栏,添加一个tab栏组件,并设置好标签列表

总结

本篇带着大家搭建了一下首页,主要需要掌握页面的布局和数据列表组件的设置。微搭的组件已经提供了丰富的属性,熟练掌握每个组件的属性是低码开发的必备技能。

相关文章
|
6天前
|
小程序 Android开发
|
22天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
330 7
|
21天前
|
人工智能 小程序
一步步开发AI运动小程序】二、引入插件
随着人工智能技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等AI运动APP广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。内容包括新建uni-app项目、配置插件、部署模型、安装依赖包、全局初始化和调用插件对象。
|
20天前
|
小程序 搜索推荐 数据挖掘
跳绳打卡小程序开发多钱费用
跳绳打卡小程序通过智能手机即可轻松使用,无需额外设备,只需一根跳绳即可开始您的健康之旅。它结合了便捷性、互动性和个性化设置,让跳绳这项运动变得更加有趣和高效
|
21天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
408 1
|
2天前
|
小程序 数据安全/隐私保护
|
7天前
|
小程序
|
7天前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。
|
8天前
|
人工智能 小程序 vr&ar
AI运动小程序开发常见问题集锦二
截至当前,我们的AI运动识别小程序插件已迭代至第23个版本,广泛应用于健身、体育、体测、AR互动等场景。本文针对近期用户咨询,汇总了常见问题,帮助用户减少开发成本,提高效率。主要涵盖计时与计数模式的区别、综合排行榜生成方法、全屏模式适配及无开发能力用户的解决方案。
|
8天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。