小程序组件 —— 21组件案例演示 - 划分页面结构

小程序常用组件有以下六个:

  • view 组件
  • swiper 和 swiper-iem 组件
  • image 组件
  • text 组件
  • navigator 组件
  • scroll-view 组件

在学习完这六个组件后,会继续学习字体图标,字体图标在小程序开发中每个项目基本都是使用到;下面我们使用上面六个组件和字体图标实现项目首页的效果:

如上图,在顶部导航条下面是一个轮播图,轮播图下面是公司信息,公司信息下面是商品导航,当点击之后能够跳转,最底部是一个商品推荐,能够进行左右滑动;

接下来打开微信开发者工具,切换到首页目录,对应 index 文件夹,将该文件夹的 index.wxml 和 index.wxss 的默认代码删除;在 index.wxml 中划分四个区域,对应上图中的四个区域,我们可以使用四个 view,如下图所示:

接下来添加一下背景颜色,打开左上侧的调试器:

可以发现四个 view 被一个 page 包围,这个 page 组件我们并没有写,是微信小程序自带的一个组件,page 会包裹所有的组件;我们首先给 page 设置高度,并设置一个背景颜色,打开 index.wxss(可以修改后缀为 .scss),如下图:

到这里,我们就已经把首页划分为四个区域,同时给首页设置了一个背景颜色;

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

相关推荐
说私域7 小时前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往7 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw7 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
weixin_lynhgworld10 小时前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序
ᥬ 小月亮13 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
说私域1 天前
技术赋能与营销创新:开源链动2+1模式AI智能名片S2B2C商城小程序的流量转化路径研究
人工智能·小程序·开源
游戏开发爱好者82 天前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
weixin_lynhgworld2 天前
代驾小程序系统开发:引领出行行业数字化转型
小程序
Python大数据分析2 天前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
yzx9910132 天前
JS与Go:编程语言双星的碰撞与共生
java·数据结构·游戏·小程序·ffmpeg