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>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值