uniapp项目所遇问题总结

刚入职的新人接手的一个项目，遇到很多问题，在这里总结一下，方便以后回忆和改进。

1.想让一个盒子内的text标签下的文字实现左下角对齐

• 目前的解决办法是设置padding，使文字下移，同时需要设置box-sizing: border-box;

2.设置字体小于12px（9px），使用transform: scale(0.75);，但是会留有空白，不能中间对齐

• 目前的解决办法是设置：transform: scale(0.75);transform-origin:0 0;使得文字原点为左上角，然后实现居中。
• 同时可以对应的放大盒子的width，来消除留白

3.设置一个盒子往上覆盖一部分上面的盒子,如图：

• 需要使用相对定位：position: relative; margin-top: -80rpx;
• 相对定位相对的是父元素

4.设置PingFangSC-regular字体无效？

5.设置文字垂直居中

• 设置文字的行高等于父元素的行高：align-height:(父元素行高)rpx
• 设置属性：display: table-cell; vertical-align:middle;
  • 样式中display: table-cell，作为表格单元格显示，vertical-align:middle属性才能起作用。

6.设置顶部标签栏不滑动

• 添加样式：position: fixed;top: 0;z-index: 999;使得顶部标签对齐，且不被覆盖

7.设置文字竖向显示：

• writing-mode: vertical-lr;

8.在for循环中，动态绑定image标签的src属性需要加“：”绑定才能生效，如下面示例代码

	
		
	
	
		{{news.title}}
	

9.当组件中的数据更新时，组件不会自动的刷新，需要强制组件进行刷新

1. 定义子标签并通过 v-if hackReset 值(true | fasle) 控制子标签的重建
    
 
2. 定义hackReset初始值 true 保证初始化子标签正常显示
    data() {
       return {
         hackReset: true,
       }
    }
 
3.调用方法使子标签销毁并重建
   click() {
      // 销毁子标签
      this.hackReset = false;
      // 重新创建子标签
      this.$nextTick(() => {
        this.hackReset = true;
      });
    },

原文链接：https://blog.csdn.net/quKbin/article/details/88948031

10.动态绑定style、class

// 动态绑定样式（三目运算符）
网站建设

//动态绑定类
网站建设