网站建设项目策划书,琼海做网站公司,一个销售网站的设计方案,做金融看哪些网站有哪些内容我们的家政服务小程序已经完成了首页和分类展示页面的开发#xff0c;接下来就需要开发详情页了。在详情页里我们展示我们的各项服务内容#xff0c;让用户可以了解每项家政服务可以提供的内容。
低码开发不像传统开发#xff0c;如果开发详情页需要考虑每个字段的类型接下来就需要开发详情页了。在详情页里我们展示我们的各项服务内容让用户可以了解每项家政服务可以提供的内容。
低码开发不像传统开发如果开发详情页需要考虑每个字段的类型搭配对应的组件进行展示。在微搭中开发详情页只需使用数据详情组件即可
01 创建页面
打开应用编辑器点击创建页面 输入页面名称
02 添加组件
低码开发的特点是可视化开发我们只需要拖拽对应的组件即可。在详情页开发时我们主要选择数据详情组件即可将数据详情组件拖入编辑区 生成页面的时候我们要先选择对应的数据源数据详情组件会根据数据源的字段自动的匹配相应的组件。选择我们的服务内容数据源 03 设置页面参数
详情页在展示数据的时候需要知道是哪一条记录微搭中标识数据的字段叫数据标识。我们通常是从首页或者分类展示页面点击服务的图片进入到详情页在跳转页面的时候需要将数据标识传入。
详情页需要有对应的参数接收我们传入的数据标识微搭中页面参数是在URL参数中定义。选中大纲树中的页面新建页面URL参数 04 设置筛选条件
参数设置好之后我们的数据详情组件要根据传入的id来做数据过滤点击筛选条件设置数据标识等于我们的id
05 调整组件
数据详情自动生成的页面不太复合我们的要求需要调整一下先把图片调整到第一个位置 修改一下图片的宽和高 在普通容器里添加文本组件 绑定文本内容绑定成标题 设置文本组件的样式加粗设置字号设置外边距 调整字段的顺序最后一行的图文详情修改为富文本展示组件 最后设置一个底部的导航条用来显示价格客服的图标和立即预约的按钮 这里的价格我们用表达式绑定用到了字符串连接的知识
¥$context.id1.data.fwjg普通容器的样式参考
self {box-shadow: 0px 2px 8px rgba(0, 0, 0, 14);width: 100%;height: 120rpx;background: rgb(255, 255, 255);position: fixed;left: 0px;bottom: 0px
}里边的内容需要按照效果做微调就不一一介绍了具体的思路参考CSS的布局知识
06 从首页跳转到详情页
详情页配置好之后我们就需要设置首页给图文卡片重新配置图文内容跳转到详情页
$page.dataset.state.service.records.map((item,index){return {des:¥item?.fwjg,title: item?.bt,icon: item?.zstp,insideUrl: u_fu_wu_xiang_qing,tapStatus: inside,withParams: true, params: [{key:id,value:item._id}]}
})最终的效果
