微信小程序开发（day01）

最新推荐文章于 2025-05-16 13:58:15 发布

A宝呀

最新推荐文章于 2025-05-16 13:58:15 发布

阅读量120

点赞数

文章标签：微信小程序小程序微信

本文链接：https://blog.youkuaiyun.com/m0_73254888/article/details/130673845

版权

view和scroll-view

案例一

第一个是三个不同的方块，文字要有居中的效果

第二个是三个方块是竖着排列，并且是可以拉动的，就是有滚动的效果哦

wxml

<!--pages/myhome/myhome.wxml-->
<view class="container1">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</view>

<scroll-view class="container1" scroll-y="true" style="height: 150px;">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

wxss

/* pages/myhome/myhome.wxss */
.container1 view {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.container1 view:nth-child(1) {
  background-color: lightblue;
}
.container1 view:nth-child(2) {
  background-color: lightgreen;
}
.container1 view:nth-child(3) {
  background-color: lightpink;
}

.container1 {
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
}