小步调组件 —— 27 组件案例 -保举商品区域

这一节主要实现保举商品区域功能，这里先分析一下，在微信小步调中如何实现底部的滚动；
在微信小步调中，假如想实现内容滚动，需要使用 scroll-view 组件，scrool-view 用于设置可滚动视图区域，适用于需要滚动展示内容的场景，用于在小步调中实现类似于网页中的滚动条结果，用户可以通过手指滑动或者点击滚动条来滚动内容，这里需要留意两个属性：

• scroll-x：允许横向滚动；
  
• scroll-y：允许纵向滚动；
  

打开微信开发者工具，在 index.wxml 中添加 scroll-view 的实今世码：

1. <scroll-view scroll-x class="scroll-x">
2.   <view>1</view>
3.   <view>2</view>
4.   <view>3</view>
5. </scroll-view>

复制代码

scroll-x 属性接收布尔值，true 表现允许横向滚动，忽略属性值时默认 scroll-x 的值为 true；
在 index.scss 中添加样式：

1. .scroll-x {
2.   width: 100%;
3.   white-space: nowrap;
4.   background-color: skyblue;
6.   view {
7.     display: inline-block;
8.     width: 300rpx;
9.     height: 80rpx;
11.     &:first-child {
12.       background-color: lightseagreen;
13.     }
15.     &:last-child {
16.       background-color: lightcoral;
17.     }
18.   }
19. }

复制代码

css 样式的功能如下：

• .scroll-x 类：
  
  
  
  • width: 100%;：使容器的宽度占满其父元素的100%
    
  • white-space: nowrap;：防止子元素换行，确保全部子元素在同一行表现，从而实现水平滚动的结果
    
  • background-color: skyblue;：设置容器的配景颜色为天蓝色
    
  
  
• view 选择器：
  
  
  
  • display: inline-block;：使每个子元素（view）以块级元素的形式表现，但仍然在同一行内排列
    
  • width: 300rpx; 和 height: 80rpx;：设置每个子元素的宽度为300rpx，高度为80rpx（rpx 是一种相应式单位，通常用于小步调开发）
    
  
  
• :first-child 和 :last-child 伪类：
  
  
  
  • &:first-child：为第一个子元素设置配景颜色为浅海洋绿（lightseagreen）
    
  • &:last-child：为最后一个子元素设置配景颜色为浅珊瑚色（lightcoral）
    
  
  

最后得到的结果如下：

除了使用 scroll-x 设置横向滚动属性，还可以使用 scroll-y 设置纵向滚动属性，在 index.wxml 中添加：

1. <scroll-view scroll-y class="scroll-y">
2.   <view>1</view>
3.   <view>2</view>
4.   <view>3</view>
5. </scroll-view>

复制代码

scroll-y 属性接收布尔值，true 表现允许纵向滚动，忽略属性值时默认 scroll-y 的值为 true；
在 index.scss 中添加样式：

1. .scroll-y{
2.   height: 400rpx;
3.   background-color: skyblue;
4.   margin-top: 10rpx;
6.   view{
7.     height: 400rpx;
8.     &:first-child {
9.       background-color: lightseagreen;
10.     }
12.     &:last-child {
13.       background-color: lightcoral;
14.     }
15.   }
16. }

复制代码

css 样式的功能如下：

• .scroll-y 类：
  
  
  
  • height: 400rpx;：设置容器的高度为400rpx（rpx 是一种相应式单位，通常用于小步调开发）
    
  • background-color: skyblue;：设置容器的配景颜色为天蓝色
    
  • margin-top: 10rpx;：在容器的顶部添加10rpx的外边距，以便与上方的元素保持肯定的间距
    
  
  
• view 选择器：
  
  
  
  • height: 400rpx;：设置每个子元素（view）的高度为400rpx，使其与容器的高度类似
    
  
  
• :first-child 和 :last-child 伪类：
  
  
  
  • &:first-child：为第一个子元素设置配景颜色为浅海洋绿（lightseagreen），以便于视觉区分
    
  • &:last-child：为最后一个子元素设置配景颜色为浅珊瑚色（lightcoral），同样用于视觉区分
    
  
  

最后得到的结果如下：

参考视频：尚硅谷微信小步调开发教程

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。