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属性需要加“:”绑定才能生效,如下面示例代码

<view class="show_image" v-for="(news,index) in newsList" :key="index" >
	<view class="show_image_top">
		<image :src = "news.src"></image>
	</view>
	<view class="show_image_bottom">
		<text>{{news.title}}</text>
	</view>
</view>

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

1. 定义子标签并通过 v-if hackReset (true | fasle) 控制子标签的重建
    <view v-if="hackReset"></view>
 
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

// 动态绑定样式(三目运算符)
<text :style="{'color': (index == 1 ? '#000':'#666666')}">网站建设</text>

//动态绑定类
<text  :class="[ isShow =='password' ? 'show' : 'hidden']">网站建设</text>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页