小程序学习三（样式导入、图片全屏展示）

WXSS样式导入

实例

/* 导入图片列表样式  */
@import "../common/image_list.wxss";

官方文档

与 CSS 相比，WXSS 扩展的特性有：

尺寸单位
样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

实例代码

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

图片全屏展示

目的效果

关键
在页面配置文件中，如下配置,去掉默认导航栏

{
“navigationStyle”:"custom"
}

官方文档

Navigation是小程序的顶部导航组件，*

当页面配置navigationStyle设置为custom的时候可以使用此组件替代原生导航栏*。

示例

json

{
    "usingComponents": {
        "mp-navigation-bar": "../components/navigation-bar/navigation-bar"
    },
    "navigationStyle": "custom",
    "navigationBarTitleText": "UI组件库"
}