小程序开发:完善新增和编辑所思所想功能

上文说到我们完成了编辑页使用富文本编辑器和详情页可以显示图片的功能。

这里我们再完善下新增和编辑功能,以前因为CURD都是生成的,所以新增和编辑页会有很多重复代码,需要直接删除新增页面,保留编辑页即可,这里的逻辑是:有id则为编辑、没有则为新增。

逻辑明确了,我们就开动。

回顾了下首页列表,我还是觉得得在图片后面加一个数量标识。

原理就是给图片所在的div加position-relative,再在这个div下新建一个div存在数量,给一个position-absolute top0 right10,然后再调整下背景颜色和透明度:

样式是这样,得找一个渐变颜色从左到右显示,这对我一个后端开发来说有点挑战。

调整后的样式如下:

调一下透明度为0.7:

好像文字页透明了,搜搜有什么办法可以让背景透明但是文字不透明的。

OK想要的效果实现了:

样式和结构代码如下:

这样,当图片数量大于3时,就会再最后一张图片张有一个浮层显示所有图片张数,且浮层背景透明,图片张数文字不透明的效果了,完美~

昨天的遗憾补上了,接下来可以安心搞今天的事项了。

今天得事项是:删除新增页面,复用编辑页面,点击新增时跳转到编辑页面,此时是没有id的,当点击提交时,如果没有id则为新增、有则为修改,确定了整体思路,开搞。

1、首先将新增页面的新增逻辑复制一下:

2、删除新增页:

3、将article分包中的路由也一并删除

4、将首页点击新增图标时的跳转页面改为编辑页:

5、编辑页面统一做新增、编辑判断处理,并将提交按钮做防抖:

最终效果:
 

1月11日.mp4

至此~所思所想模块的开发就完结了,后续会有其它模块的功能会更新,请关注我哦~

要打开微信小程序开发工具,首先确保已经成功安装了微信小程序开发工具并打开了电脑。接下来,按照以下步骤来新增一个名为weather的项目: 1. 打开微信小程序开发工具,点击左上角的 "新建项目"。 2. 在弹出的窗口中填写项目的基本信息。填写的内容如下: - "项目目录" :选择一个本地文件夹用于存放项目文件。 - "AppID":输入小程序的 AppID。 - "项目名称":输入项目的名称,这里为 "weather"。 - "项目类型":选择 "小程序"。 - "项目备注":填写项目的备注信息,可选填。 3. 填写完毕后,点击 "确定"按钮。 4. 开发工具会自动在你选择的项目目录中生成一些默认的文件和文件夹,包括项目的配置文件 app.json、首页文件 index.js、界面文件 index.wxml 和样式文件 index.wxss等。 5. 在开发工具的左侧导航栏中,点击 "编辑"选项,可以进行代码的编写和编辑。你可以根据需求,编写小程序的逻辑和界面代码。 6. 在开发过程中,可以通过点击工具栏上的 "编译"按键,来编译并预览小程序的效果。在弹出的预览页面中,可以看到小程序在移动设备上的实际效果。 7. 在开发工具的右侧导航栏中,可以查看小程序的日志输出情况,用于调试和查找问题。 总之,以上就是在微信小程序开发工具中新增一个名为 "weather" 的项目的步骤。通过编写代码和调试,你可以逐步完善和实现你的小程序功能和界面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一方_self

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值