上一篇:微信小程序电商实战-入门篇
嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽。那么最终会做成什么样呢?好了,不啰嗦了 我们先看首页长什么样吧!
首页效果图.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个功能,分别是:首页搜索、导航栏和轮播。如果有什么问题可以随时在下方留言哦,如果对大家有帮组请帮忙分享转发一下吧 ~~~
下期预告
下期会来完成小程序电商实战-首页的实时热销榜、福利专场和个人中心+购物车的浮动布局,上效果图:
本文来自企鹅号 - 全球大搜罗媒体
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文来自企鹅号 - 全球大搜罗媒体
如有侵权,请联系 cloudcommunity@tencent.com 删除。