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

文章目录

一、实现步骤

(一)创建项目

(二)创建页面

(三)准备图片素材

(四)编写页面结构

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

  • 源码
  • 预览效果

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

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

(五)编写页面样式

1、编写轮播图区样式

  • 设置swiper容器高度:350rpx,设置容器的高度和宽度
  • 预览效果

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

  • 整体页面样式

  • 每个格子页面样式

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

(六)查看模拟机效果

  • 查看轮播图和九宫格
相关推荐
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac5 小时前
微信小程序的组件
微信小程序
stormjun7 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck7 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie2349 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong9 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
蜕变菜鸟9 小时前
小程序跳转另一个小程序
小程序
13 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
芝士蛋卷呀13 小时前
健康生活,注重养生
生活
fo安方16 小时前
视频——教学篇——拍摄和剪辑
生活