家政服务小程序实战教程12-详情页
创始人
2024-05-25 23:05:49
0

我们的家政服务小程序已经完成了首页和分类展示页面的开发,接下来就需要开发详情页了。在详情页里我们展示我们的各项服务内容,让用户可以了解每项家政服务可以提供的内容。

低码开发不像传统开发,如果开发详情页需要考虑每个字段的类型,搭配对应的组件进行展示。在微搭中开发详情页只需使用数据详情组件即可

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}]}
})

最终的效果

在这里插入图片描述

相关内容

热门资讯

Python|位运算|数组|动... 目录 1、只出现一次的数字(位运算,数组) 示例 选项代...
张岱的人物生平 张岱的人物生平张岱(414年-484年),字景山,吴郡吴县(今江苏苏州)人。南朝齐大臣。祖父张敞,东...
西游西后传演员女人物 西游西后传演员女人物西游西后传演员女人物 孙悟空 六小龄童 唐僧 徐少华 ...
名人故事中贾岛作诗内容简介 名人故事中贾岛作诗内容简介有一次,贾岛骑驴闯了官道.他正琢磨着一句诗,名叫《题李凝幽居》全诗如下:闲...
和男朋友一起优秀的文案? 和男朋友一起优秀的文案?1.希望是惟一所有的人都共同享有的好处;一无所有的人,仍拥有希望。2.生活,...
戴玉手镯的好处 戴玉手镯好还是... 戴玉手镯的好处 戴玉手镯好还是碧玺好 女人戴玉?戴玉好还是碧玺好点佩戴手镯,以和田玉手镯为佳!相嫌滑...
依然什么意思? 依然什么意思?依然(汉语词语)依然,汉语词汇。拼音:yī    rán基本解释:副词,指照往常、依旧...
高尔基的散文诗 高尔基的散文诗《海燕》、《大学》、《母亲》、《童年》这些都是比较出名的一些代表作。
心在飞扬作者简介 心在飞扬作者简介心在飞扬作者简介如下。根据相关公开资料查询,心在飞扬是一位优秀的小说作者,他的小说作...
卡什坦卡的故事赏析? 卡什坦卡的故事赏析?讲了一只小狗的故事, 我也是近来才读到这篇小说. 作家对动物的拟人描写真是惟妙...
林绍涛为简艾拿绿豆糕是哪一集 林绍涛为简艾拿绿豆糕是哪一集第三十二集。 贾宽认为是阎帅间接导致刘映霞住了院,第二天上班,他按捺不...
小爱同学是女生吗小安同学什么意... 小爱同学是女生吗小安同学什么意思 小爱同学,小安同学说你是女生。小安是男的。
内分泌失调导致脸上长斑,怎么调... 内分泌失调导致脸上长斑,怎么调理内分泌失调导致脸上长斑,怎么调理先调理内分泌,去看中医吧,另外用好的...
《魔幻仙境》刺客,骑士人物属性... 《魔幻仙境》刺客,骑士人物属性加点魔幻仙境骑士2功1体质
很喜欢她,该怎么办? 很喜欢她,该怎么办?太冷静了!! 太理智了!爱情是需要冲劲的~不要考虑着考虑那~否则缘...
言情小说作家 言情小说作家我比较喜欢匪我思存的,很虐,很悲,还有梅子黄时雨,笙离,叶萱,还有安宁的《温暖的玄》 小...
两个以名人的名字命名的风景名胜... 两个以名人的名字命名的风景名胜?快太白楼,李白。尚志公园,赵尚志。
幼儿教育的代表人物及其著作 幼儿教育的代表人物及其著作卡尔威特的《卡尔威特的教育》,小卡尔威特,他儿子成了天才后写的《小卡尔威特...
海贼王中为什么说路飞打凯多靠霸... 海贼王中为什么说路飞打凯多靠霸气升级?凯多是靠霸气升级吗?因为之前刚到时确实打不过人家因为路飞的实力...
运气不好拜财神有用吗运气不好拜... 运气不好拜财神有用吗运气不好拜财神有没有用1、运气不好拜财神有用。2、拜财神上香前先点蜡烛,照亮人神...