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>