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

版权声明： https://blog.csdn.net/qq_41115965/article/details/82144490

全局的样式（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 表示小程序特有的页面最大的外层容器。另外，其他的解释见上面代码的注释。