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>
相關文章
- ubuntu所遇問題彙總Ubuntu
- vue專案問題總結Vue
- vue專案中遇到的問題總結Vue
- uniapp專案實踐總結(二十)URLScheme 協議知識總結APPScheme協議
- 專案總結(幾大未解決問題)
- 專案中遇到的RediS快取問題及面試問題總結Redis快取面試
- 大型電子政務專案問題總結薦
- ITM6.1實施中所遇問題經驗總結
- uniapp專案實踐總結(十六)自定義下拉重新整理元件APP元件
- 專案問題總結2:GUID區分大小寫嗎?GUI
- uniapp專案實踐總結(十七)實現滾動觸底載入APP
- 轉 xx_adam 的專案總結,主要是專案管理存在的問題專案管理
- 【Vue專案總結】後臺管理專案總結Vue
- Vue專案常見問題彙總Vue
- 專案總結
- lnmp1.5 環境下部署 Laravel 專案的問題總結LNMPLaravel
- 專案總結二:解決鍵盤覆蓋tableview的問題View
- uniapp專案實踐總結(十五)使用websocket實現簡易聊天室APPWeb
- 問題總結
- uniapp 微信小程式總結APP微信小程式
- jquery+mvc專案問題小結jQueryMVC
- 用專案總結來減少問題的重複發生(轉)
- Docker 專題總結Docker
- Laravel 專案總結Laravel
- Nuxt專案總結UX
- 番茄專案總結
- 今日專案總結
- 專案總結整理
- lync專案總結
- sap 專案總結
- 專案總結【收集】
- 小程式開發所遇的問題以及一些小細節
- 專案問題總結3:MyEclipse匯入專案報錯-"The import javax.servlet cannot be resolved"EclipseImportJavaServlet
- Elasticsearch 問題總結Elasticsearch
- Swoole 問題總結
- Kerberos問題總結ROS
- 面試問題總結面試
- 專案總結之專案失誤