【愚公系列】《微信小程序项目实战（AI编程+视频图解）》013-莫凡商城小程序项目视图容器组件的应用

💎【行业认证·权威头衔】
✔ 华为云天团核心成员：特约编辑/云享专家/开发者专家/产品云测专家
✔ 开发者社区全满贯：CSDN博客&商业化双料专家/阿里云签约作者/腾讯云内容共创官/掘金&亚马逊&51CTO顶级博主
✔ 技术生态共建先锋：横跨鸿蒙、云计算、AI等前沿领域的技术布道者

🏆【荣誉殿堂】
🎖 连续三年蝉联"华为云十佳博主"（2022-2024）
🎖 双冠加冕CSDN"年度博客之星TOP2"（2022&2023）
🎖 十余个技术社区年度杰出贡献奖得主

📚【知识宝库】
覆盖全栈技术矩阵：
◾ 编程语言：.NET/Java/Python/Go/Node…
◾ 移动生态：HarmonyOS/iOS/Android/小程序
◾ 前沿领域：物联网/网络安全/大数据/AI/元宇宙
◾ 游戏开发：Unity3D引擎深度解析

---

🚀莫凡商城首页的静态布局设计

开发一个莫凡商城微信小程序时，需要确保用户可以浏览各种商城图书信息。在设计小程序页面时，需要使用不同的视图容器组件来展示不同的内容并实现交互效果。

• view 组件是最基本的容器组件，可以使用它来布局其他组件，设计页面的结构和层次。
• swiper 组件可以实现图片轮播的效果，可以在首页上使用它展示各个图书的封面或活动海报，让用户通过滑动屏幕浏览不同的内容。
• text 组件用于显示文字内容，可以使用它来展示图书的名称、特点等相关信息。
• image 组件用于显示图片，可以使用它来展示图书的封面图或其他相关图片，吸引用户的注意。

莫凡商城首页包含 3 个部分：

1. 第 1 部分是用来搜索莫凡商城图书的搜索区域。
2. 第 2 部分是通过海报轮播效果显示的轮播广告。
3. 第 3 部分是用来展示图书商品的区域，每个区域展示 3 本图书，其中“更多”可以链接更多的图书商品。

🔎1 需求分析

莫凡商城首页包含搜索、海报轮播、展示图书商品、查看更多图书商品等功能。它的布局设计需要用到视图容器组件，如 view 组件、swiper 组件、text 组件、image 组件等。

本章会详细介绍这些组件及其使用方法。海报轮播效果使用 swiper 组件来实现；点击搜索区域和查看更多图书商品时会进行页面跳转，会用到导航组件和导航 API；页面的样式需要用 WXSS 来渲染，进行页面美化布局，最终完成莫凡商城首页的静态布局设计。

🔎2 视图容器组件的应用

视图容器组件是用来进行页面布局的，不同的视图容器组件可以用来实现不同的布局效果。

• view 组件是基本的容器组件。
• scroll-view 是可滚动视图容器组件。
• swiper 是滑块视图容器组件。
• movable-view 是可移动视图容器组件。

🦋2.1 视图容器组件 view

view 组件是 WXML 页面布局的基础组件，也是最常用的页面布局组件，它的使用方法和 HTML 里的 <div> 类似。view 组件的属性如表 3.1 所示。

表 3.1 view 组件的属性

属性	类型	默认值	说明
hover-class	string	none	指定点击时的样式类，当 hover-class="none" 时，表示没有点击态效果
hover-stop-propagation	boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	number	50	指定按住后多久出现点击态，单位为 ms
hover-stay-time	number	400	指定手指松开后点击态的保留时间，单位为 ms

注：原文中 hover-start-time 默认值有误，此处按微信官方文档修正为 50ms。

🦋2.2 可滚动视图容器组件 scroll-view

scroll-view 组件允许视图容器中的内容进行横向滚动或纵向滚动，类似于浏览器的水平滚动条和垂直滚动条，可以在有限的显示窗口中，通过滚动的方式显示更多的内容。scroll-view 组件的常用属性如表 3.2 所示。

表 3.2 scroll-view 组件的常用属性

属性	类型	默认值	说明
scroll-x	boolean	false	允许横向滚动
scroll-y	boolean	false	允许纵向滚动
scroll-top	number	无	设置纵向滚动条位置
scroll-left	number	无	设置横向滚动条位置
scroll-into-view	string	无	值应为某子元素 id，表示滚动到该元素时，元素顶部对齐滚动区域顶部
scroll-with-animation	boolean	false	在设置滚动条位置时使用动画过渡
enable-back-to-top	boolean	false	在 iOS 中点击顶部状态栏、Android 系统中双击标题栏时，滚动条返回顶部（只支持纵向滚动）
bindscrolltoupper	eventhandle	无	滚动到顶部/左端时会触发 scrolltoupper 事件
bindscrolltolower	eventhandle	无	滚动到底部/右端时会触发 scrolltolower 事件

注意：

1. 基础库 2.4.0 以下版本不支持嵌套 textarea（多行输入框）、map（地图）、canvas（画布）和 video（视频）组件。
2. scroll-into-view 的优先级高于 scroll-top。
3. 在滚动 scroll-view 组件时会阻止页面回弹，无法触发 onPullDownRefresh 事件；若要触发，需要使用页面的滚动组件，而不是 scroll-view 组件。

🦋2.3 滑块视图容器组件 swiper

swiper 组件是经常会用到的组件，它可以实现海报轮播效果或者多种登录方式（账号与密码登录、手机号快捷登录等）之间的切换，可以用来在指定区域内切换显示不同内容。swiper 组件的属性如表 3.3 所示。

表 3.3 swiper 组件的属性

属性	类型	默认值	说明
indicator-dots	boolean	false	设置是否显示面板指示点
indicator-color	color	rgba(0,0,0,.3)	设置指示点颜色
indicator-active-color	color	#000000	设置当前选中的指示点颜色
autoplay	boolean	false	设置是否自动切换
current	number	0	设置当前页面的 index
interval	number	5000	设置自动切换的时间间隔
duration	number	500	设置滑动动画时长
circular	boolean	false	设置是否采用衔接滑动
vertical	boolean	false	设置滑动方向是否为纵向

🦋2.4 可移动视图容器组件 movable-view

movable-view 是可移动视图容器组件，在页面中可以被拖曳。在使用这个组件时，需要先定义可移动区域 movable-area，然后定义直接子节点 movable-view，否则不能移动。

movable-area 需要设置 width 和 height 属性，不设置时默认为 10px。movable-view 也需要设置 width 和 height 属性，不设置时默认为 10px。movable-view 默认为绝对定位，top 和 left 属性为 0px。movable-view 组件的常用属性如表 3.4 所示。

表 3.4 movable-view 组件的属性

属性	类型	默认值	说明
direction	string	none	设置 movable-view 的移动方向。属性值有 all、vertical、horizontal、none
inertia	boolean	false	设置 movable-view 是否带有惯性
out-of-bounds	boolean	false	设置超过可移动区域后，movable-view 是否还可以移动
x	number/string	无	定义 x 轴方向的偏移。如果 x 的值不在可移动范围内，movable-view 会自动移动到可移动范围内；改变 x 的值会触发动画
y	number/string	无	定义 y 轴方向的偏移。如果 y 的值不在可移动范围内，movable-view 会自动移动到可移动范围内；改变 y 的值会触发动画
damping	number	20	阻尼系数，用于控制 x 或 y 的值改变时的动画和过界回弹的动画，值越大，移动越快，停止越快；必须大于 0，否则会被设置成默认值
friction	number	2	摩擦系数，用于控制惯性滑动的动画，值越大，摩擦力越大，滑动越快停止
disabled	boolean	false	设置是否禁用 movable-view 的拖动功能
scale	boolean	false	设置是否支持双指缩放，默认缩放手势生效区域在 movable-view 内
scale-min	number	0.5	定义缩放倍数最小值
scale-max	number	10	定义缩放倍数最大值
scale-value	number	1	定义缩放倍数，取值范围为 0.5—10
animation	boolean	true	设置是否使用动画
bindchange	eventhandle	无	设置拖动过程中触发的事件，event.detail = {x: x, y: y, source: source}。其中 source 是产生移动的原因，值可为 touch（拖动）、touch-out-of-bounds（超出移动范围）、out-of-bounds（超出移动范围后的回弹）、friction（惯性）和空字符串（setData()）
bindscale	eventhandle	无	设置缩放过程中触发的事件。event.detail = {scale: scale}
htouchmove	eventhandle	无	设置初次手指触摸后移动方向为横向时触发。如果 catch 此事件，则意味着 touchmove 事件（手指触摸后移动事件）也被 catch
vtouchmove	eventhandle	无	设置初次手指触摸后移动方向为纵向时触发。如果 catch 此事件，则意味着 touchmove 事件（手指触摸后移动事件）也被 catch

🦋2.5 项目实战：使用 AI 编程工具辅助实现搜索区域布局与海报轮播

☀️1. 任务目标

实现搜索区域布局与海报轮播功能，利用 view 组件、image 组件来完成搜索区域布局，实现搜索区域布局水平居中和垂直居中，利用 swiper 组件实现海报轮播功能。

莫凡商城首页顶部为搜索区域和海报轮播区域，海报轮播区域可以动态地显示不同海报内容。

☀️2. 任务实施

（1）打开通义灵码，输入以下内容并发送，如图 3.1 所示。

AI 提示词（1）：

实现微信小程序首页的搜索区域布局，最外层盒子宽为100%，高为300rpx，背景色为#DC7365，左下和右下圆角边框为60rpx，盒子内部分为两部分内容，第一部分最左边是更多图标、中间为搜索框，搜索框内部左边有搜索图标、右边是搜索按钮，最右边是购物车图标，第二部分横向排列，分别为“品质好物”“一站购齐”“极速送达”“无忧售后”。

等待 AI 编程工具生成代码。

（2）实现搜索区域布局后，继续实现海报轮播功能。输入以下内容并发送，如图 3.2 所示。

AI 提示词（2）：

下面继续实现海报轮播功能，有3张海报图片，使用swiper组件在微信小程序里面实现此功能，可以自动轮播，5秒一次，显示原点，宽度为100%，高度为图片高度。

等待 AI 编程工具生成代码。

☀️3. AI 生成

通义灵码根据需求生成了实现搜索区域布局的代码，包括 WXML 布局以及 WXSS 样式，如图 3.3 所示。

以下为根据提示词补全的完整 AI 生成代码示例。

搜索区域布局 WXML：

<!-- 搜索区域 -->
<view class="search-area">
  <!-- 第一部分：更多图标、搜索框、购物车图标 -->
  <view class="search-top">
    <image class="icon-more" src="/images/more.png" mode="aspectFit"></image>
    <view class="search-box">
      <image class="icon-search" src="/images/search.png" mode="aspectFit"></image>
      <input class="search-input" placeholder="搜索图书" disabled />
      <button class="search-btn">搜索</button>
    </view>
    <image class="icon-cart" src="/images/cart.png" mode="aspectFit"></image>
  </view>

  <!-- 第二部分：四个服务标签 -->
  <view class="search-tags">
    <text class="tag">品质好物</text>
    <text class="tag">一站购齐</text>
    <text class="tag">极速送达</text>
    <text class="tag">无忧售后</text>
  </view>
</view>

搜索区域布局 WXSS：

.search-area {
  width: 100%;
  height: 300rpx;
  background-color: #DC7365;
  border-bottom-left-radius: 60rpx;
  border-bottom-right-radius: 60rpx;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.search-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.icon-more,
.icon-cart {
  width: 50rpx;
  height: 50rpx;
}

.search-box {
  flex: 1;
  height: 70rpx;
  background-color: #fff;
  border-radius: 35rpx;
  display: flex;
  align-items: center;
  margin: 0 20rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
}

.icon-search {
  width: 36rpx;
  height: 36rpx;
  margin-right: 10rpx;
}

.search-input {
  flex: 1;
  font-size: 28rpx;
}

.search-btn {
  width: 120rpx;
  height: 56rpx;
  line-height: 56rpx;
  font-size: 26rpx;
  background-color: #DC7365;
  color: #fff;
  border-radius: 28rpx;
  padding: 0;
  margin: 0;
}

.search-tags {
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
}

.tag {
  font-size: 26rpx;
  color: #fff;
}

海报轮播 WXML：

<!-- 海报轮播 -->
<swiper
  class="banner-swiper"
  indicator-dots="{{true}}"
  autoplay="{{true}}"
  interval="5000"
  duration="500"
  circular="{{true}}"
  indicator-color="rgba(255,255,255,0.5)"
  indicator-active-color="#ffffff"
>
  <swiper-item wx:for="{{banners}}" wx:key="id">
    <image class="banner-img" src="{{item.imageUrl}}" mode="widthFix"></image>
  </swiper-item>
</swiper>

海报轮播 WXSS：

.banner-swiper {
  width: 100%;
  height: auto;
}

.banner-img {
  width: 100%;
  height: auto;
  display: block;
}

海报轮播 JS 数据：

Page({
  data: {
    banners: [
      { id: 1, imageUrl: '/images/banner1.jpg' },
      { id: 2, imageUrl: '/images/banner2.jpg' },
      { id: 3, imageUrl: '/images/banner3.jpg' }
    ]
  }
});

通义灵码继续实现了海报轮播功能，如图 3.4 所示。

☀️4. 优化建议

在运行 AI 生成的代码后，发现其结果与我们的实际需求还有一定的差距，可以从以下几个方面进行优化。

1. 对需求进行更加细致的描述后再次进行生成。
   例如在生成搜索框的时候，给出具体的宽高和背景色。

2. 分模块生成。
   例如先完成搜索区域模块内容，再完成海报轮播模块内容。

3. 根据自己的实际需求手动调整代码。
   例如生成轮播图的时候，我们可以手动设置轮播图的大小。

补充优化建议：

• 图标和图片路径需确保真实存在，否则页面显示空白。
• 搜索框可以改为可点击跳转，而不是 disabled。
• 轮播图高度可使用 mode="widthFix" 自适应，或固定高度。
• 使用 rpx 替代 px，提升多屏幕适配。
• 服务标签可以增加点击事件，跳转到对应分类。
• 购物车图标可以显示角标，提示购物车数量。

☀️5. 页面展示

代码经过优化后，运行代码，页面样式如图 3.5 所示。

页面整体结构如下：

1. 搜索区域
   背景色 #DC7365，左右下角圆角 60rpx，高度 300rpx。上方为更多图标、搜索框、购物车图标；下方为“品质好物”“一站购齐”“极速送达”“无忧售后”四个标签。

2. 海报轮播区域
   使用 swiper 组件实现，宽度 100%，高度自适应图片高度，自动轮播，间隔 5 秒，显示指示点。

🔎注意事项

1. view 组件是最基础的布局容器，类似于 HTML 中的 <div>。
2. scroll-view 可以实现横向或纵向滚动，但会阻止页面回弹，无法触发 onPullDownRefresh。
3. swiper 组件用于轮播，需配合 swiper-item 使用。
4. movable-view 必须放在 movable-area 中才能移动。
5. 使用 AI 生成代码后，需人工审核图片路径、尺寸单位和交互逻辑。
6. 提示词越具体，AI 生成的代码越接近需求。
7. 建议分模块生成，逐步优化，不要一次性依赖 AI 完成整个页面。

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/aa2528877987/article/details/167129335