首页 > 云开发 > Css > 正文

后台-系统设置-扩展变量-手机广告位-内容正文顶部

web前端开发中遇到的问题整理记录——2019-04

Css

目录

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.在项目中引用

详细教程点击传送门

文章来源:segmentfault,作者:小楼南风。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:william.shi#ucloud.cn(邮箱中#请改为@)进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-手机广告位-内容正文底部

本文标签

前端开发 Web 小程序

推荐文章

热门标签

    热门文章 最新文章 文章云

站内导航

全站搜索