微信小程序案例：2-2本地生活

文章目录

• 一、实现步骤
• • （一）创建项目
  • （二）创建页面
  • （三）准备图片素材
  • （四）编写页面结构
  • • 1、编写轮播区域页面结构
    • 2、编写九宫格区域页面结构
  • （五）编写页面样式
  • • 1、编写轮播图区样式
    • 2、编写九宫格区域页面样式
  • （六）查看模拟机效果

一、实现步骤

（一）创建项目

（二）创建页面

（三）准备图片素材

（四）编写页面结构

1、编写轮播区域页面结构

• 源码
  
• 预览效果
  

2、编写九宫格区域页面结构

• view组件里嵌套9个view组件
  

（五）编写页面样式

1、编写轮播图区样式

• 设置swiper容器高度：350rpx，设置容器的高度和宽度

• 预览效果
  

2、编写九宫格区域页面样式

• 整体页面样式
  

• 每个格子页面样式
  

• 每个格子中的图片和文字的页面样式
  

（六）查看模拟机效果

• 查看轮播图和九宫格