微信小程序学习笔记（3）-全局的样式（app.wxss）与通用布局

我就是我 2021-09-16 05:40 506阅读 0赞

## 全局的样式（app.wxss）与通用布局 ##

在小程序开发的时候，大多时候，页面的布局都是基本相同的。因此，页面布局也就形成了固定的套路。常见的布局及全局样式如下：

### index.wxml文件 ###

<view class='container'>
      <scroll-view scroll-y="true" class='page-body' bindscrolltolower="loadMore">
            
      </scroll-view>
    </view>

布局解释：

***<view class='container'></view>***  表示外层最大的容器（.page除外）

***<scroll-view scroll-y="true" class='page-body' bindscrolltolower="loadMore"></scroll-view>***  表示可滚动视图区域。

### app.wxss文件 ###

/**app.wxss**/
    .page{
      width: 100%;
      display: flex;
      flex-direction: column;
    }
    .container{
      display: flex;
      /* 纵向排列 */
      flex-direction: column;
      /* 每项居中 */
      align-items: center;
      /* 两端居中 */
      justify-content: space-around;
      box-sizing: border-box;
      font-family: '微软雅黑';
    }
    .page-body{
      display: flex;
      flex-direction: column;
      flex: 1;
      height: 1300rpx;
    }

样式解释：

***.page*** 表示小程序特有的页面最大的外层容器。另外，其他的解释见上面代码的注释。

发表评论取消回复

表情：

评论列表（有 0 条评论，506人围观）

还没有评论，来说两句吧...

相关阅读

相关【微信小程序】全局配置

目录全局配置文件及常用的配置项全局配置 - window 1. 小程序窗口的组成部分 2. 了解 window 节点常用的配置项 3. 设置导航栏的标题 4.

你的名字/ 2023年10月01日 22:36/ 0 赞/ 29 阅读

相关微信小程序----全局变量

例如： 1. 在微信小程序开发中使用高德地图的微信小程序开发，其中key值就需要在多个页面使用； 2. 在微信小程序开发电商平台时同样，比如客服电话，就需要在多个页面使用

缺乏、安全感/ 2023年07月13日 03:56/ 0 赞/ 26 阅读

相关微信小程序–样式

微信小程序–样式 1.布局小技巧 1.1 通过添加空标签，实现内容之间的间隔 <view class='height_20'></view>

本是古典何须时尚/ 2023年02月19日 12:29/ 0 赞/ 39 阅读

相关微信小程序基础学习笔记

微信小程序基础学习笔记 (小白基础) 个人学习豆瓣电影简单的小程序基础构造，笔记会定期的更新目前笔记范围包括： 1.设置小程序基础配置，清除多余代码，保留原始配置

小鱼儿/ 2023年01月13日 04:10/ 0 赞/ 177 阅读

相关微信小程序基础学习笔记

![b3e451cd6af85bd466b6fab6e35e4b0a.png][] 一、微信小程序简介 1、[微信小程序][Link 1]，小程序的一种，英文名Wech

布满荆棘的人生/ 2022年12月25日 08:53/ 0 赞/ 415 阅读

相关微信小程序的样式

微信小程序中css的使用技巧总结这篇文章介绍了最近很火的微信小程序中css的使用技巧总结，有需要的同学可以参考一下本文微信小程序 css使用技巧 1:用纯CSS创

本是古典何须时尚/ 2022年07月13日 14:00/ 0 赞/ 318 阅读

相关微信小程序学习笔记

页面跳转可以用js点击事件wx.navigateTo（\{url：‘…’\}）来实现，也可以直接用`<navigator url=’...’></navigator>`来操作

客官°小女子只卖身不卖艺/ 2022年02月19日 11:09/ 0 赞/ 378 阅读

相关微信小程序学习笔记（3）-全局的样式（app.wxss）与通用布局

全局的样式（app.wxss）与通用布局在小程序开发的时候，大多时候，页面的布局都是基本相同的。因此，页面布局也就形成了固定的套路。常见的布局及全局样式如下：

我就是我/ 2021年09月16日 05:40/ 0 赞/ 507 阅读

相关微信小程序学习笔记（1）-全局配置

全局配置 `app.json`文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。名词解释： page

桃扇骨/ 2021年09月16日 05:26/ 0 赞/ 392 阅读

相关微信小程序全局函数设置全局样式

小程序 >开发 >指南 >小程序框架 >逻辑层 >模块化设置全局可获取的数据 1、在app.js文件中: App({

矫情吗；*/ 2021年07月24日 18:05/ 0 赞/ 743 阅读