view和scroll-view组件的基本用法（黑马程序员笔记）

最新推荐文章于 2024-07-21 07:44:54 发布

JOU-MCU

最新推荐文章于 2024-07-21 07:44:54 发布

阅读量577

点赞数 14

文章标签：笔记

本文链接：https://blog.csdn.net/2201_75911673/article/details/135880703

版权

文章详细展示了在微信小程序中如何使用WXML和WXSS进行页面布局，包括基本的容器样式设置、Flexbox布局实现和添加滚动条功能，以实现不同视觉效果。

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

效果一：

index.wxml修改代码：

<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

index.wxss修改代码：

.container1 view {
  width: 100px;
  height:100px;
  text-align:center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightskyblue;
}
.container1 view:nth-child(3){
  background-color: lightcoral;
}

效果二：

index.wxml修改代码：

<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

index.wxss修改代码：

.container1 view {
  width: 100px;
  height:100px;
  text-align:center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightskyblue;
}
.container1 view:nth-child(3){
  background-color: lightcoral;
}
.container1{
  display: flex;
  justify-content:space-around;
}

效果三：可实现滑动条

index.wxml修改代码：

<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

index.wxss修改代码：

.container1 view {
  width: 100px;
  height:100px;
  text-align:center;
  line-height: 100px;
}
.container1 view:nth-child(1){
  background-color: lightgreen;
}
.container1 view:nth-child(2){
  background-color: lightskyblue;
}
.container1 view:nth-child(3){
  background-color: lightcoral;
}
.container1{
  border: 1px solid red;
  height: 120px;
  widows: 100px;
}