专栏首页企鹅号快讯微信小程序电商实战-首页(上)

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

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

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

首页效果图.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 条评论
登录 后参与评论

相关文章

  • 程序员面试常见错误 看你中枪了没

    无论做什么事,我们都有第一次的时候。面试也不例外,一次表现优秀的面试对于自己的求职是很有帮助的。不仅仅是在面试官心目中留下好的印象,同时也对自己谈及薪资要求时候...

    企鹅号小编
  • 神经网络和深度学习

    深度学习听起来很高大上,其实在此之前被人们称为“有很多隐含层的神经网络”。由此可见两者具有密不可分的联系。 我在2008年做数模竞赛时,那时正好读大二,第一次接...

    企鹅号小编
  • 机器正在生物化&生物正在工程化

    《失控》为何能位列亚马逊畅销图书人类故事读物类第一名? 首先,必须先从《失控》一书的作者凯文·凯利(Kevin Kelly,1952~,昵称:KK)说起。 ? ...

    企鹅号小编
  • CentOS7默认安装的/home中转移空间到根目录

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    拓荒者
  • Linux 系统下如何对目录扩容?

    卸载/home时 提示目标忙,fuser -m /home查看谁用/home时提示没有fuser命令

    用户6543014
  • Centos7.2学习记录(4)——调整root和home大小

    剩余大小为441.12G。 扩展/root所在的lv,增加421.12G大小

    胡了了
  • 两台服务器文件拷贝

    吾爱乐享
  • CentOS减小home分区扩大root分区

    用户1086810
  • linux使用--根目录空间不足,追加空间到根目录下

    最近在爬虫,要保存大量的源码在linux上,最后发现根目录不足,想要追加根目录的空间,我的系统是centos7,还好之前分配了一整个系统盘给centos,有20...

    拓荒者
  • centos7调整根目录挂载分区容量大小

    lvextend -L +100G /dev/mapper/centos-root

    拓荒者

扫码关注云+社区

领取腾讯云代金券