首页>文档>AIPage>aipage小程序自定义文章/产品详情页样式

此组别内的文章

需要支持?

如果通过文档没办法解决您的问题,请提交工单获取我们的支持!

aipage小程序自定义文章/产品详情页样式

与网站类似,小程序详情页同样支持自定义设计。以产品详情为例,小程序产品详情页默认有基本的样式设置项,如容器、图片、标题、底部按钮等设置项

aipage小程序自定义文章/产品详情页样式插图

如果想完全自定义设计,首先需要删除默认的版块,添加自由容器版块到页面中并设置绑定页面数据源

aipage小程序自定义文章/产品详情页样式插图1

绑定页面数据源的意思是当前版块里面的数据允许绑定当前详情页的动态数据,例如详情标题、图片、正文内容都属于当前页面数据源数据。拖拽图片到页面中,设置使用动态数据,选择缩略图字段即完成了详情产品图的自动绑定(需预览才能看到实际效果)。除此之外还可以对图片进行样式设置,例如添加圆角。

aipage小程序自定义文章/产品详情页样式插图2

与图片类似,拖拽文本元素到版块里同样可以绑定动态数据,例如绑定产品标题字段。

aipage小程序自定义文章/产品详情页样式插图3

另外比较重要的就是详情富文本内容了,富文本比较特殊,内容高度是根据后台编辑内容长度决定了,无法设计时确定。因为不能使用固定高度的自由容器,而应使用流式容器,流式容器的区别是他的高度会随着内容高度自动变化。默认拖拽富文本组件到页面中将自动包裹流式容器,可以给上级流式容器添加内边距提升阅读体验。

aipage小程序自定义文章/产品详情页样式插图4
aipage小程序自定义文章/产品详情页样式插图5

底部按钮的添加比较特殊,底部按钮属于浮动元素,始终固定贴紧在手机底部,添加时需要切换到浮动面板,拖拽按钮到页面中,然后设置左下对齐或者右下对齐模式,设置对应的位置信息就能让按钮始终固定在底部对应位置。

aipage小程序自定义文章/产品详情页样式插图6

完成了以上设置,一个带有基本数据的自定义详情页就做好啦!可以添加任意元素到页面中进行装饰,也可以添加其他动态列表到底部版块里方便显示更多信息。

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
搜索