web前端開發中遇到的問題整理記錄——2019-04

目錄

1.css 匹配下標是奇數或偶數的子元素
2.獲取屏幕高度
3.小程序tabbar顯示不出的緣由
4.小程序狀態欄沉浸式
5.小程序引用iconfont圖標

正文

1.css 匹配下標是奇數或偶數的子元素

.item-order:nth-of-type(odd){
        border-left:3px solid #f5f5f5;
        //奇數
    }
    .item-order:nth-of-type(even){
        border-right:3px solid #f5f5f5;
       //偶數
    }

2.獲取屏幕高度

獲取覽器顯示區域的高度： $(window).height();

獲取瀏覽器顯示區域的寬度：$(window).width();

獲取頁面的文檔高度：$(document).height();

獲取頁面的文檔寬度：$(document).width();

獲取滾動條到頂部的垂直高度：$(document).scrollTop() 或 $(window).scrollTop();

獲取滾動條到左邊的垂直寬度：$(document).scrollLeft() 或$(window).scrollLeft();
傳送門1
傳送門2

3.小程序tabbar顯示不出的緣由

pages數組的第一項必須是tabBar的list數組的一員

"pages":[
"pages/clickDemo/clickDemo",
"pages/logs/logs",
"pages/index/index",
"pages/mypage/mypage"
]

tabbar中list數組內容是：

"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "image/location_normal.png",
"selectedIconPath": "image/location_selected.png"
},
{
"pagePath": "pages/logs/logs",
"text": "設置",
"iconPath": "image/setting_normal.png",
"selectedIconPath": "image/setting_selecred.png"
}

若是不是自定義的tabbar, custom爲true也會顯示不出來，這個是筆者我的粗心犯得小錯誤，找了半天.....

4.小程序狀態欄沉浸式

app.json 中 window 配置：navigationStyle:"custom"

5.小程序引用iconfont圖標

1.在阿里圖標庫中找到須要的圖標並加入項目

2.把項目下載項目到本地

3.在本地打開下載的目錄將 iconfont.css文件改成iconfont.wxss複製到項目中

4.在app.wxss中引入iconfont.wxss

5.在阿里圖標庫個人項目中 點擊複製代碼

6.將複製的@font-face替換掉iconfont.wxss中的@font-face

7.在項目中引用

詳細教程點擊傳送門