uniapp项目所遇问题总结

最新推荐文章于 2024-09-23 11:33:30 发布

Sport_18

最新推荐文章于 2024-09-23 11:33:30 发布

阅读量2.4k

点赞数

分类专栏： Web前端文章标签： uniapp 小程序项目总结

本文链接：https://blog.csdn.net/Sport_18/article/details/102957333

版权

Web前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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

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>