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

最新推荐文章于 2024-07-23 14:17:22 发布

De_Moivre

最新推荐文章于 2024-07-23 14:17:22 发布

阅读量1.4k

点赞数

分类专栏：微信小程序文章标签：微信小程序视图示例

本文链接：https://blog.csdn.net/de_moivre/article/details/79340044

版权

这篇博客针对微信小程序官方view和scroll-view组件的示例中缺失的CSS问题进行了说明。作者整理了必要的CSS代码，帮助读者理解如何通过添加wxss实现预期的视图效果，包括view的基本应用和scroll-view的滚动功能。

摘要由CSDN通过智能技术生成

在参考微信小程序的视图示例时，发现给的示例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后，则效果如下：