1.注意事项
1.内置css
使用内置CSS变量有以下几点需要注意。
(1) var(--status-bar-height)变量在微信小程序环境中为固定值25px, 在App中为手机实际状态栏高度。
(2)当设置"navigationStyle":"custom"取消原生导航栏后, 由于窗体为沉浸式, 占据了状态栏位置, 此时可以使用一个高度为var(--status-bar-height)的view放在页面顶部, 避免页面内容出现在状态栏位置。
(3) H5端不存在原生导航栏和TabBar, 使用前端div模拟导航栏和TabBar。如果设置了一个固定在底部位置的view, 其在小程序和App端是在TabBar上方, 但在H5端会与TabBar重叠。此时可使用--window-bottom变量, 使这个底部view不管在哪个端, 都是固定在TabBar上方。
(4) 目前Nvue在App端还不支持--status-bar-height变量, 替代方案是在页面onLoad时通过uni. getSystemInfoSync(). statusBarHeight获取状态栏高度, 然后通过style绑定方式给占位view设定高度。
2.设置背景图片的注意事项
设置背景图片的注意事项uni-app支持在CSS里设置背景图片,设置方式与普通Web项目大体相同,但需要注意以下几点。
(1) 支持base64格式图片。
(2)支持网络路径图片。
(3)小程序不支持在CSS中使用本地文件,包括本地的背景图片和字体文件,需以base64编码的方式使用。
(4)使用本地路径背景图片需注意以下几点。
①为了方便开发者使用,若背景图片小于40KB,uni-app编译到不支持使用本地背景图片的平台时, 会自动将其转换为base64格式。②图片大于等于40KB会有性能问题,不建议使用太大的背景图片,若必须使用,则需自己将其转换为base64格式使用,或将其上传到服务器上,从网络地址引用。③本地背景图片的引用路径推荐以“~@”开头的绝对路径,示例代码如下所示。
. test2 {
background-image: url('~@/static/logo.png');
}
2.页面配置一些代码
1.style的配置示例代码
{
"pages":[{
"path":"pages/index/index",
"style":{
"navigationBarTitleText":"首页", //设置页面标题文字
"enablepullDownRefresh":true //开启下拉刷新
}
},
...
]}
2.tabBar的配置示例代码
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/icon/tab-home.png",
"selectedIconPath": "static/icon/tab-home-current.png",
"text": "首页"
}, {
"pagePath": "pages/shopping/shopping",
"iconPath": "static/icon/tab-cart.png",
"selectedIconPath": "static/icon/tab-cart-current.png",
"text": "购物车"
}, {
"pagePath": "pages/my/my",
"iconPath": "static/icon/tab-user.png",
"selectedIconPath": "static/icon/tab-user-current.png",
"text": "我的"
}]
},
3.轮播图的一个设置代码
<swiper class="a" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item>
<image src="图1" mode=""></image>
</swiper-item>
<swiper-item>
<image src="图2" mode=""></image>
</swiper-item>
<swiper-item>
<image src="图3" mode=""></image>
</swiper-item>
</swiper>