小程序组件 —— 27 组件案例 -推荐商品区域

这一节主要实现推荐商品区域功能,这里先分析一下,在微信小程序中如何实现底部的滚动;

在微信小程序中,如果想实现内容滚动,需要使用 scroll-view 组件,scrool-view 用于配置可滚动视图区域,适用于需要滚动展示内容的场景,用于在小程序中实现类似于网页中的滚动条效果,用户可以通过手指滑动或者点击滚动条来滚动内容,这里需要注意两个属性:

  • scroll-x:允许横向滚动;
  • scroll-y:允许纵向滚动;

打开微信开发者工具,在 index.wxml 中添加 scroll-view 的实现代码:

typescript 复制代码
<scroll-view scroll-x class="scroll-x">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</scroll-view>

scroll-x 属性接收布尔值,true 表示允许横向滚动,忽略属性值时默认 scroll-x 的值为 true;

在 index.scss 中添加样式:

css 复制代码
.scroll-x {
  width: 100%;
  white-space: nowrap;
  background-color: skyblue;

  view {
    display: inline-block;
    width: 300rpx;
    height: 80rpx;

    &:first-child {
      background-color: lightseagreen;
    }

    &:last-child {
      background-color: lightcoral;
    }
  }
}

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 中添加:

typescript 复制代码
<scroll-view scroll-y class="scroll-y">
  <view>1</view>
  <view>2</view>
  <view>3</view>
</scroll-view>

scroll-y 属性接收布尔值,true 表示允许纵向滚动,忽略属性值时默认 scroll-y 的值为 true;

在 index.scss 中添加样式:

css 复制代码
.scroll-y{
  height: 400rpx;
  background-color: skyblue;
  margin-top: 10rpx;

  view{
    height: 400rpx;
    &:first-child {
      background-color: lightseagreen;
    }

    &:last-child {
      background-color: lightcoral;
    }
  }
}

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),同样用于视觉区分

最后得到的效果如下:

参考视频:尚硅谷微信小程序开发教程

相关推荐
盛夏绽放15 小时前
关于 uni-app 与原生微信小程序中的生命周期 —— 一次“生命旅程”的解读
微信小程序·小程序·uni-app
流水线上的指令侠16 小时前
使用C#写微信小程序后端——电商微信小程序
微信小程序·小程序·c#·visual studio
知识分享小能手16 小时前
uni-app 入门学习教程,从入门到精通,uni-app 基础知识详解 (2)
前端·javascript·windows·学习·微信小程序·小程序·uni-app
2501_9160088917 小时前
iOS 发布全流程详解,从开发到上架的流程与跨平台使用 开心上架 发布实战
android·macos·ios·小程序·uni-app·cocoa·iphone
cesske20 小时前
uniapp 编译支付宝小程序canvas 合成图片实例,支付宝小程序 canvas 渲染图片 可以换成自己的图片即可
小程序·uni-app·apache
從南走到北1 天前
JAVA代泊车接机送机服务代客泊车系统源码支持小程序+APP+H5
java·开发语言·微信小程序·小程序
木易 士心1 天前
组织架构树形选择组件使用说明(Vue3 + UniApp)
微信小程序·钉钉·notepad++
软件技术员1 天前
微信小程序电子测宅堪墓风水罗盘
微信小程序·小程序
future_studio1 天前
聊聊 Unity(小白专享、C# 小程序 之 播放器)
unity·小程序·c#
小Tomkk1 天前
Rokid 开发空间小程序 实战
3d·小程序·rokid·jsar