uniapp專案所遇問題總結

三個人工作室發表於2020-11-28

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>

相關文章