2024.9.13 渲染层

App.json 的 pages 数组里面加一行，保存后，系统自动添加一个界面list

小程序默认将排在第一位的页面作为首页渲染

---

【官方文档】scroll-view | uni-app官网 (dcloud.net.cn)

使用 scroll-view 实现横向滚动需要注意以下几点：

1.使用scroll-view，这是实现滚动的组件

2.加 scroll-x="true"，表示横轴滚动因为默认的 scroll-x 和 scroll-y 都是 false

3.scroll-view所在的要求滚动的容器 要设置 white-space: nowrap; 

4.大容器里面的小容器要求设置 display: inline-block;

实现效果：

实现代码：

<!--pages/list/list.wxml-->
<scroll-view class="container1" scroll-x="true">
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

/* pages/list/list.wxss */
.container1 view{
  width: 200px;
  height:100px;
  text-align: center;
  line-height: 100px;
  display: inline-block;
}

.container1 :nth-child(1){
  background-color:lightcoral;
}

.container1 :nth-child(2){
  background-color:lightgoldenrodyellow;
}

.container1 :nth-child(3){
  background-color:lightskyblue;
}

.container1{
  white-space: nowrap;
  height:100px;
}

---

Swiper, swiper-item 实现轮播图 （下次再学）