cairostar-CSDN博客

原创早期React多级折叠动效选项菜单思考与实现

5.想法：点击title的div如果是显示子菜单，除了下一层ul要显示高度，它的所有上层都要增加这个高度，标识它可控外层的条件是增加了'out'这个class，父级没有这个class表示不是菜单本身不需要增加高度。折叠菜单或者叫多级选项菜单，用流行UI框架下的相关实现改改就好了，为什么要手写？因为手痒啊，有个简单方法特别想印证一下效果。如果当前菜单为折叠态，那就展开它和它的所有上层菜单；如果当前菜单是展开态，那不仅要折叠它和它的所有子级菜单，同时要把所有上层菜单也减少这个高度，也就是为什么要*(-1)。

2025-02-21 23:08:36 281

原创二级嵌套多级评论系统与点击消息提示的定位消息功能实现

为了实现这种嵌套，数据库评论表中的设计了cu1和cu2两个字段，前者表示一级评论是谁，就在谁的楼层下显示评论，如果该字段为空就表示是blog下的一级评论。而cu2表示一级评论下的二级评论是谁，就是二层中显示的@谁的回复，没有cu3，因为虽是多级但没有三层，有cu2这个字段就够了。前端的评论组件<comment :data="comments" :cNum="0"></comment>必须是嵌套组件了，cNum用于标记一级，而在嵌套组件中这个值就不同了，用于样式区分设定。两层嵌套评论都做了分页。

2025-02-21 14:44:22 450

原创 vue在前后端交互中格式化路由的两种方式

此方式稍显麻烦的原因是不知道前端是不需要这个pid的，也就是本文中的第二种方式，可以把有权限访问的路由name直接发给前端。vue端建有一个完整路由表，根据name数组就可过滤出一个可访问的路由结构，而不必指定父级是谁。看到一些数据交互案例中，对于权限路由后端返回一个带pid的一维路由数组,pid代表父级id,这个数组要前端格式化成。不用担心只给子路由name而无法得到父级，都是递归的应用。

2024-11-29 18:08:27 298 1

原创同向无限滑动和淡入淡出缩放效果轮播图用vue和react的实现

1.css部分：外层div设置超出隐藏，内层ul 设置足够宽，如果放6张图，700%宽就够了，因为要在末尾多放一张，这样滑动到第7张时也就是显示的第1张图，再关动画无缝切到第1张。效果上：下一张图缩小淡入时上一个图放大淡出，这里我们把切换时间设置4秒，动画时间设置2秒，看起来比较顺滑。3.两个图层进入下一张的时机不同，动画开始上图层透明度为0，它切换到下一张后2秒淡入同时下图层淡出。4.此时把动画关闭，下图层切换到上图层那张图把change样式去掉，上图层加上change样式。2.增加class比如。

2024-11-29 18:06:29 257

原创微信小程序中实现一个金额摇奖效果

思考：数字翻动的动画样式，0-9似乎每个数字都要写，好在不多具有可实现性。为了过渡平滑，四个数组多塞几组0-9数字，比如0-9+0-9+0-9+1+2..+5，这是数字5的数组。由于是下翻动效果，注意是0-9+0-9+0-9+1+2..+5的倒序，但这样一开始就把金额显示出来了，下面的都隐藏了，我们在最上边再补一个0。实例上要显示四位数字，根据后台返回金额，比如15.69元，处理成数字从00：00快速翻动到15：69的效果。2.每组数字为纵向排列，把得到的获奖金额，分解成四个数字，调用对应的数字动画。

2024-11-29 18:03:14 686