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

我就是我 2021-09-16 05:40 494阅读 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 条评论，494人围观）

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

相关阅读

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

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

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

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

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

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

相关微信小程序–样式

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

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

相关微信小程序（九）布局

1、display:block 指定为块内容器模式，总是使用新行开始显示，微信小程序的视图容器(view,scroll-view和swiper)默认都是dispaly:bloc

曾经终败给现在/ 2022年12月27日 01:58/ 0 赞/ 148 阅读

相关微信小程序的样式

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

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

相关微信小程序学习笔记

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

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

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

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

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

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

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

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

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

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

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

相关微信小程序页面布局

一,微信小程序页面布局方式采用的是Flex布局 1.Flex布局，是W3c在2009年提出的一种新的方案，可以简便，完整，响应式的实现各种页面布局。 2.Flex布局提

野性酷女/ 2021年06月11日 15:11/ 0 赞/ 795 阅读