微信小程序1——scroll-x和scroll-y的用法

FCCheng

已于 2024-07-19 19:38:38 修改

阅读量254

点赞数 1

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

于 2024-07-02 21:47:44 首次发布

本文链接：https://blog.csdn.net/FCCheng/article/details/140136755

版权

scroll-x横向滑动
scroll-y纵向滑动

1.scroll-x允许横向滑动，首先在list-wxml中加入下列代码

<scroll-view class="container1" scroll-x>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
<!--scroll-y 允许纵向滚动
scroll-x 允许横向滚动-->

在这里插入图片描述

打开list-wxss，加入下列代码

.container1 view {
  display: inline-block; 
  // 设置 display 属性为 inline-block，这会使元素以内联块级元素的方式显示，可以在同一行内显示多个元素
    height: 100px;
    text-align: center;
    width: 100px;  
}
.container1 view:nth-child(1) {
    background-color: cornflowerblue;
}
.container1 view:nth-child(2) {
  background-color: lightblue;
}
.container1 view:nth-child(3) {
  background-color: lightcoral;
}
.container1 {
  border: 1px solid red;
  height: 100px;
  width: 120px; 
  white-space: nowrap;
    // 设置 white-space 属性为 nowrap，这会导致文本不换行，适合横向滚动的布局
  /*  display: flex;
  justify-content: space-around;
  第一次
  */
}

2.scroll-y 允许纵向滑动，在list-wxml中加入下列代码

<scroll-view class="container1" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>
<!--scroll-y 允许纵向滚动
scroll-x 允许横向滚动-->

在list-wxss中加入下列代码：

.container1 view {
    height: 100px;
    width: 100px;
    text-align: center;
    line-height: 100px;
}
.container1 view:nth-child(1) {
    background-color: cornflowerblue;
}
.container1 view:nth-child(2) {
  background-color: lightblue;
}
.container1 view:nth-child(3) {
  background-color: lightcoral;
}
.container1 {
  border: 1px solid red;
  height: 120px;
  width: 100px; 
  /*  display: flex;
  justify-content: space-around;
  第一次
  */
}