微信小程序开发系列（十二）·屏幕滚动scroll

您所在的位置：网站首页 › 电脑上view什么意思啊怎么弄 › 微信小程序开发系列（十二）·屏幕滚动scroll

微信小程序开发系列（十二）·屏幕滚动scroll

2024-07-16 02:34| 来源: 网络整理| 查看: 265

1. 微信小程序实现内容的滚动

1.1 scroll-x：允许横向滚动

1.2 scroll-y：允许纵向滚动

2. 实现结构样式

3. 拓展

3.1 white-space

3.2 display

3.3 justify-self

1. 微信小程序实现内容的滚动

在微信想小程序中如果想实现内容滚动，需要使用 scroll-view 组件。

网页中的滚动条效果，用户可以通过手指滑动或者点击滚动条来滚动内容。scroll-view:可滚动视图区域,适用于需要滚动展示内容的场景,用于在小程序中实现类似于。

① scroll-x：允许横向滚动

② scroll-y：允许纵向滚动

1.1 scroll-x：允许横向滚动

找到index.wxml文件，加入如下代码：

1 2 3

复制类名“scroll-x”，找到index.scss文件，加入如下代码：

.scroll-x{ width: 100%; // 设置 white-space 属性为 nowrap，这会导致文本不换行，适合横向滚动的布局 white-space: nowrap; background-color: skyblue; view{ // 设置 display 属性为 inline-block，这会使元素以内联块级元素的方式显示，可以在同一行内显示多个元素 display: inline-block; width: 300rpx; height: 80rpx; &:last-child{ background-color: lightcoral; } &:first-child{ background-color: lightseagreen; } } }

展示效果：

1.2 scroll-y：允许纵向滚动

找到index.wxml文件，加入如下代码：

1 2 3

复制类名“scroll-y”，找到index.scss文件，加入如下代码：

.scroll-y{ height: 400rpx; background-color: skyblue; // 设置上外边距为 10rpx margin-top: 10rpx; view{ height: 400rpx; &:last-child{ background-color: lightcoral; } &:first-child{ background-color: lightseagreen; } } }

此时展现效果：

框住部分能够上下滚动。

2. 实现结构样式

找到index.wxml文件，找到推荐商品，加入如下代码：

鲜花玫瑰 234 鲜花玫瑰 44 鲜花玫瑰 66 鲜花玫瑰 88

注意：

① 更改为自己的图片路径

② 将1.微信小程序实现内容的滚动的代码注释掉

代码使用的内容：

：这是一个视图容器，其类名为 "good-hot"。

：这是一个横向滚动的滚动视图容器，具有 scroll-x 类和 scroll-x 属性。这意味着它将在水平方向上支持滚动。

：这是一个包裹的父容器。

：这是一个商品项的容器，包含了商品的图片、名称和数量。

：这是一个图片元素，其 src 属性指向 "../../picture/images/floor.jpg"，并且没有指定 mode 属性。

：这是一个文本元素，用于显示商品的名称和数量。

此时的页面，展示效果：

复制类名“good-hot”，找到index.scss文件，加入如下代码：

// 推荐商品区域 .good-hot{ background-color: #fff; // 设置内边距为 16rpx padding: 16rpx; // 设置边框圆角为 10rpx border-radius: 10rpx; // 设置字体大小为 24rpx font-size: 24rpx; .scroll-x{ width: 100%; // 设置 white-space 属性为 nowrap，表示不换行 white-space: nowrap; view{ // 设置为内联块级元素（display: inline-block） display:inline-block; width: 320rpx; height: 440rpx; // 设置右外边距为 16rpx margin-right: 16rpx; .good-item{ // 设置为 Flex 布局，并且垂直方向布局（flex-direction: column） display: flex; flex-direction: column; // 设置在主轴上的对齐方式为两端对齐（justify-self: space-between） justify-self: space-between; text{ // 当作为 view 元素的第一个子元素时，设置字体加粗（font-weight: bold） &:nth-of-type(1){ font-weight: bold; } } } image{ width: 100%; height: 320rpx; } // 当作为其父元素的最后一个子元素时，将右外边距设为0，即取消最后一个元素的右侧间距 &:last-child{ margin-right: 0; } } } }

最终展示效果：

3. 拓展 3.1 white-space

white-space是 CSS 中用于控制元素内部空白符处理方式的属性。它有几个可能的取值，每个取值对应不同的处理方式：

normal: 默认值。连续的空白符会被合并，换行符会被当作换行处理。nowrap: 文本不会换行，会在一行中显示，直到遇到换行符或者标签为止。pre: 保留空白符序列，但是会合并连续的空白符。文本中的换行符会被保留。pre-line: 保留换行符，但是合并连续的空白符。pre-wrap: 保留空白符序列和换行符。 3.2 display

display是 CSS 中一个非常重要的属性，用于定义元素应该生成什么框类型。这个属性有多种取值，每种取值对应不同的元素布局方式，常见取值包括：

block: 元素将被显示为块级元素，即在页面上会以独立的块显示，默认情况下会占据一整行。inline: 元素将被显示为内联元素，即在页面上会在同一行内显示，不会换行。inline-block: 元素将被显示为内联块级元素，即和内联元素一样在同一行内显示，但是可以设置宽高等属性，类似于块级元素。none: 元素将不会被显示在页面上，相当于隐藏元素。 3.3 justify-self

justify-self是CSS Grid 布局中用于设置单个网格元素在其容器中的水平对齐方式的属性。这个属性只作用于网格子元素，并且可以覆盖容器级别上的对齐设置。

justify-self属性可以接受以下几种可能的取值：

start: 元素在容器中水平对齐到起始位置。end: 元素在容器中水平对齐到末尾位置。center: 元素在容器中水平居中对齐。stretch: 默认值，元素在容器中水平拉伸以填充整个空间。left: 元素在容器中水平对齐到左侧。right: 元素在容器中水平对齐到右侧。

微信小程序开发_时光の尘的博客-CSDN博客

【本文地址】

微信小程序开发系列（十二）·屏幕滚动scroll

微信小程序开发系列（十二）·屏幕滚动scroll

今日新闻

推荐新闻