Skip to content

1.小程序修改 wx:for 默认的 item 和 index 名字

wx:for-itemwx:for-index 是在 wx:for 循环中可选的属性

这样做的好处是可以自定义循环中使用的变量名称,以便更好地符合你的代码逻辑和需求。如果你不指定 wx:for-itemwx:for-index,则默认使用的变量名称是

2.构建空白块填充的多类别展示列表

主要思路就是,有一个所有学员的大列表,当点击添加之后把大列表中的学员相应地添加到对应的类别的列表里面,同时对应的类别的空数量变量产生变化。

因为每个类别的出战成员名单是固定的,这里难点主要是如果某个类别成员不够,或者删除了某个成员,必须展示空白格,那么就相当于在每一个类别的里面有两个 for 循环,一个是被选择的(展示人员列表),一个是空的数量的 for 循环(展示空)。

而在选择添加某个学员的时候,如果确定,那么就需要把已有的类别列表里面的和选中的列表进行合并,并注意一定要把选中的列表进行清空,否则下次不会检测出来为空,那么就不会拦截住,那么就会不选择的时候也可以进行添加和合并(选中框的拦截提交是很重要的,不容易检测出来的 bug)

image.png|300

3.关于 div 的换行与宽高设置策略

如果没有为 div 元素设置宽度,并且内容超出了容器的可视区域,那么 div 元素会自动扩展以适应内容的宽度,并导致自动换行。(不需要设置自动换行,默认会自动换行)

在默认情况下,块级元素(如 div)会占据其父容器的全部可用宽度。如果没有显式设置宽度,并且内容超过了容器的宽度,浏览器会将内容自动换行以适应容器。

如果你想要阻止自动换行,你可以使用 white-space: nowrap CSS 属性,如前面的示例所示。这将强制内容在一行内显示,无论是否超出容器的宽度。

然而,如果你不设置宽度,并且内容超出容器的宽度,使用 white-space: nowrap,会导致内容溢出容器,并在水平方向上出现滚动条。

所以宽度设置了,才可以更好地自动换行,才可以让 white-space: nowrap效果得当!

但是如果设置了高度,当内容溢出的时候,就会直接折叠,并且被折叠的部分是浮动的,也就是说不占据大小,那么就会覆盖掉下面的其他内容,导致页面效果非常丑!

所以展示信息类的 div,并且有溢出风险的 div 的处理换行溢出的策略如下: ——> 这是一个前端的基本功!

1.一般要采取设置宽度,不设置高度(或者设置为 min-hight)这样的策略。

2.或者限制字数行数

3.或者设置溢出的显示效果

4.elementui 自定义主题(颜色)

image.png|850

5.vue+vite 项目配置使用 eslint

文章链接:https://blog.csdn.net/jieyucx/article/details/131449029

配置 eslintrc.js 文件