学习微信小程序 - scroll-view组件

最新推荐文章于 2024-07-25 16:59:28 发布

weixin_48040227

最新推荐文章于 2024-07-25 16:59:28 发布

阅读量150

点赞数

分类专栏：学习笔记文章标签：微信小程序学习小程序

本文链接：https://blog.csdn.net/weixin_48040227/article/details/128306743

版权

学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!--pages/list/list.wxml-->
<!-- scroll-x：允许横向滚动 -->
<!-- scroll-y：允许纵向滚动 -->
<!-- 注意：纵向滚动需要给scroll-view一个固定的高度 -->
<scroll-view class="test1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>

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

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

.test1{
  border: 1px solid red;
  /* 给scroll-view一个固定高度 */
  height: 120px;
  width: 100px;
}