微信小程序电商实战-首页(上)

上一篇:微信小程序电商实战-入门篇

嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!

首页效果图.gif

为了能够更好的表达出来,首页准备分成两次写完。

第一部分先实现如下的功能

Hi.World-home_top.gif

划分模块

大家都知道电商平台一般分为首页、商品分类、购物车和个人中心4个核心模块,那么我们先在app.json的page里添加如下代码

一、设置头部

背景颜色为白色,名称是Hi.World

二、首页搜索

上面素材看到的搜索部分颜值并不高,是因为录屏工具的问题,实际效果看下图。

搜索.png

搜索用到了template 模板技术,创建wxSearch 模板目录,添加wxSearch.js、wxSearch.json、wxSearch.wxml、wxSearch.wxss

此处省略模板代码,可以直接到Git上现在源码:地址https://github.com/yundianzixun/wxSearch-master

将下载的模板包放到和pages 同级目录,如下图所示:

项目目录.png

接下来我们把搜索模板放到首页,会用到 home.wxml和home.wxss

home.wxml

home.wxss

好啦,保存运行一下看看效果吧!

三、制作导航栏

先看我们要实现的效果图

导航栏.png

这个导航栏不是小程序底部导航栏,所以要写在页面里,在你需要导航栏的地方加入如下代码就可以实现,这里以首页为例:

home.wxss

home.wxml

在home.wxml我们使用bindtap进行点击事件监听,设置事件名称为“navbarTap”并且在home.js里设置这个事件对应的逻辑处理。我们在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item,想要了解wx:for可以参考该资料:https://www.w3cschool.cn/weixinapp/weixinapp-list.html(强烈建议如果还不会用wx:for一定要看看,因为在做数据循环渲染的时候经常要用)

home.js

四、首页轮播Banner

先看效果图

轮播Banner.gif

依然在home 模块,需要改动的页面有home.js、home.wxml、home.wxss

home.wxml

indicator-dots 是否显示面板指示点

autoplay 是否自动切换

interval 自动切换时间间隔

duration 滑动动画时长

想要了解多请查看微信官方swiper视图容器

关于wx:for上面已经介绍过了,不啰嗦了~~~

home.wxss

home.js

具体swiper 属性设置看注释~~~

总结

我们的微信小程序电商实战-首页(上) 的内容已经讲完了,我们回顾一下 一共实现了3个功能,分别是:首页搜索、导航栏和轮播。如果有什么问题可以随时在下方留言哦,如果对大家有帮组请帮忙分享转发一下吧 ~~~

下期预告

下期会来完成小程序电商实战-首页的实时热销榜、福利专场和个人中心+购物车的浮动布局,上效果图:

本文来自企鹅号 - 全球大搜罗媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏更流畅、简洁的软件开发方式

自然框架,拆分后的项目关系

  拆分了一下自然框架,似乎又绕回去了。以前是多个项目分开放的,有人说太分散了,还得一个个下载,麻烦。于是就做了一个解决方案,把项目都放在了一起。   现在呢,...

2335
来自专栏Android干货园

Base封装(二)-- 封装属于自己的Library(UI篇)

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/73...

1401
来自专栏Coding迪斯尼

Reactjs+BootStrap开发自制编程语言Monkey的编译器:创建简易的页面IDE

1812
来自专栏熊二哥

Vue快速入门

终于进入国内当前最火的前端框架Vue.js的学习了,最近周边的哥们也开始用该框架做线上项目,闲暇之余,做个快速的了解,重在基础部分。 ? 基础概念 目前在国...

4648
来自专栏企鹅号快讯

史上最全的web前端学习教程汇总!

第一阶段:HTML+CSS HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础:js基础教程、js内置对象常用方...

4475
来自专栏云飞学编程

Python学习,还在用正则或者bs4做爬虫吗?来试试css选择器吧

之前写的一些爬虫都是用的正则、bs4、xpath做为解析库来实现,如果你对web有所涉及,并且比较喜欢css选择器,那么就有一个更适合的解析库—— PyQuer...

1042
来自专栏华仔的技术笔记

React Native 初探

3736
来自专栏老马寒门IT

11-移动端开发教程-zepto.js入门教程

Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。 1...

3665
来自专栏前端架构与工程

【WebGIS系列】Typescript+WebGL+Webpack开发环境搭建

目前Web实现矢量渲染的主流技术包括SVG、VML和WebGL。相对而言,VML是一种较古老的技术,虽然未成为W3C标准,但被早期的IE浏览器(IE9以下)和微...

2333
来自专栏破晓之歌

使用pyinstaller将python脚本打包成exe文件

安装需要用到pip工具,该工具在3.5版本的python中已经自带不用另行安装,但是需要在系统变量中添加python下的Scripts文件夹,如下图: 

2921

扫码关注云+社区

领取腾讯云代金券