微信小程序视图示例之view/scroll-view示例中缺少css

在参考微信小程序的视图示例时，发现给的示例view和scroll-view缺少对应的css，整理一下给有需要的同学参考下：

View

对应官方文档: https://mp.weixin.qq.com/debug/wxadoc/dev/component/view.html

直接使用view示例代码，发现不能达到预期效果，如图中左边所示：

是因为示例中只有wxml代码，相应的wxss代码没有给出，

.flex-wrp {
  white-space: nowrap; 
  display:flex;
}

.section__title {
  background: #fbf9fe;
  width: 100%; 
  height: 50px;
}

.flex-item {
  width: 150px; 
  height: 150px; 
}
.bc_green {
  background: green;
}

.bc_red {
  background: red;
}

.bc_blue {
  background: blue;
}

添加对应的wxss后，则效果如下：

Scroll-View

对应官方文档: https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html

直接使用示例代码缺少css文件，效果如下：

添加对应的wxss文件：

.btn-area button {
  width: 100%;
}

.section__title {
  background: #fbf9fe;
  width: 100%; 
  height: 50px;
}

.scroll-view-item {
  width: 100%; 
  height: 100px; 
}

.scroll-view_H {
  white-space: nowrap;
  display:flex;
}

.scroll-view-item_H {
  width: 150px; 
  height: 150px; 
  display:inline-block;
}

.bc_green {
  background: green;
}

.bc_red {
  background: red;
}
.bc_yellow {
  background: yellow;
}
.bc_blue {
  background: blue;
}

效果图如下：