五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》

注:iVX也有免费直播课《第八期直播课》

一、详情页制作

在之前的章节中,我们已经制作完毕了登录、注册、首页等内容,在这一节中,我们编写详情页以及详情页功能制作。

详情页页面如下:

五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》
首先我们创建头部,头部跟其他页面的头部一致,不再赘述创建方法,页面组件如下:
五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》
五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》
接下来就是博文内容区域,我们创建一个博文内容行,高度设置为撑开,并且需要进行y轴裁剪,因为评论区内容不固定,肯定超出了当前的高度范围:
五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》
接下来给内容区设置内边距:
五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》
接着在内容区创建一个富文本用于显示内容:

五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》
接着我们在评论区中创建评论区内容,一个是输入的输入框一个是一个评论按钮:
五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》
那么此时再更改按钮的显示属性页面如下:
五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》
在此还需要设置对应的内边距信息,使其可以有一定的边缘厚度:
五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》
此时页面效果如下:
五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》
接着,由于是从首页点击了数据到达当前的详情页,那么此时我们还需要完善首页的内容。

创建一个服务,命名为文章获取,用于获取数据库的文章信息:

五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》
该事件直接选择文章数据库随后直接输出当前输出结果的对象数组的值即可。

接着我们到首页中,给予一个事件,该时间为显示时间,当前页面显示后直接选择对应的数据获取服务:

五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》
文章数据对象数组需要与数据库数据相同的列名才可以更好的获取内容,那么此时直接给予我们需要的列名,并且要与数据库列名相似:
五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》
接着我们创建一个 for 循环,把内容存放for 循环之中:
五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》

接着给予之后的内容数据绑定,在设置阅读量的时候需要对应的数据进行字符串拼接,字符串内容需要对应的双引号引起来:

五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》
五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》
接下来预览界面:
五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》 微信名片 五、文章详情页制作及跳转功能实现《iVX低代码/无代码个人博客制作》

来源:1_bit

声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2022年5月8日
下一篇 2022年5月8日

相关推荐