700字范文 > 微信小程序商城开发之商城首页轮播图商品分类导航以及新品特卖的实现代码

微信小程序商城开发之商城首页轮播图商品分类导航以及新品特卖的实现代码

时间：2019-12-09 18:45:27

微信小程序|小程序开发

微信小程序,小程序电商

微信小程序-小程序开发

彩票资讯站网站源码,ubuntu16图形,爬虫论文价格分析,php实现phuthon,大同seo公司lzw

本篇文章给大家带来的内容是关于微信小程序商城开发之商城首页轮播图、商品分类导航以及新品特卖的实现代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

兔子博客源码,ubuntu+root登录,数据爬虫和标注,php mathjax,seo简单总结lzw

上一篇我们设置了小程序后台服务器https域名设置、搭建了小程序基础的https框架和实现了首页导航模块，今天我们一起来看一下电商首页轮播、分类导航和新品特卖模块的实现。

微信网页版协议源码,vscode如何编写上位机,ubuntu换密码,cas在tomcat部署,登陆爬虫,php有哪些职位,杭州专业的抖音seo价格,门户网站php源码lzw

实现功能模块

主要实现2、3、4，用到的API数据服务下图例：

首页轮播模块实现

home.js

home.wxss

/* 直接设置swiper属性 */swiper {height: 300rpx;}swiper-item image {width: 100%; height: 100%;}

home.js

页面初始化轮播数据

data: { navbars:null,//接上篇导航初始化数据 currentTab: 0,//接上篇导航初始化数据 banners:null, indicatorDots: true, //是否显示面板指示点 autoplay: true, //是否自动切换 interval: 3000, //自动切换时间间隔,3s duration: 1000, // 滑动动画时长1s },

页面初始化加载轮播数据函数

/** * 生命周期函数--监听页面加载 */onLoad: function (options) { var that = this; //加载navbar导航条，接上篇导航数据 that.navbarShow(); //加载banner轮播 that.bannerShow(); },

ajax获取轮播数据

bannerShow: function (success) { var that = this; ajax.request({ method: GET, url: home/banners?key= + utils.key, success: data => { that.setData({ banners: data.result })console.log(data.result)} }) },

首页分类导航实现

home.js

home.wxss

/*=================分类导航====================*/.navs {display: flex;justify-content: left;flex-direction: row;flex-wrap: wrap; }.nav-item {width: 25%;display: flex;align-items: center;flex-direction: column;/* padding: 20rpx; */ padding-top: 20rpx;}.nav-item .nav-image {width: 80rpx;height: 80rpx; /* border-radius: 50%;设置边界圆角 */}.nav-item text {padding-top: 20rpx;font-size: 25rpx;}

home.js

页面初始化分类导航数据

data: { navbars:null,//导航数据 currentTab: 0, banners:null, //轮播数据 indicatorDots: true, //是否显示面板指示点 autoplay: true, //是否自动切换 interval: 3000, //自动切换时间间隔,3s duration: 1000, // 滑动动画时长1s menus: null, //分类导航数据},

页面初始化加载分类导航数据函数

/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; //加载navbar导航条 that.navbarShow(); //加载banner轮播 that.bannerShow(); //加载menu分类导航菜单 that.menuShow(); },

ajax获取分类导航数据

menuShow: function (success) { var that = this; ajax.request({method: GET,url: home/menus?key=+ utils.key,success: data => { that.setData({ menus: data.result })console.log(data.result)} }) },

首页新品特卖模块实现

home.js

新品特卖 {{item.name}}{{item.remark}}

home.wxss

/*=================新品特卖样式====================*/ .category-title {display: flex;flex-direction: column;margin-top: 20rpx;margin-bottom: 0rpx;padding: 0px 10px; } .category-title .title{font-size: 14px;font-weight:900;} .category-title .line_name{font-size: 10px;color: #98989f;display: flex;justify-content:space-between;} /* 分割线 */.separate {height: 15rpx;background-color: #f2f2f2;}.category-title {display: flex;flex-direction: column;margin-top: 25rpx;margin-bottom: 0rpx;}.category-title .name {font-size: 40rpx;text-align: center;margin: 10rpx auto;}.line_flag {width: 80rpx;height: 1rpx;display: inline-block;margin: 20rpx auto;background-color: gainsboro;text-align: center;}.line {width: 100%;height: 2rpx;display: inline-block;margin: 20rpx 0rpx;background-color: gainsboro;text-align: center;}.head-img {width: 100%;}.brand-name{font-weight: 600;font-size: 32rpx;} .activity-logo {width:35rpx;height:35rpx;margin-right: 10rpx; /* position: absolute; */}.pms{font-size: 28rpx;margin-bottom: 20rpx;display: flex;justify-content: left;flex-direction: row; color: #5771a8;}

home.js

页面初始化新品特卖数据

页面初始化加载新品特卖数据函数

/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; //加载navbar导航条 that.navbarShow(); //加载banner轮播 that.bannerShow(); //加载menu分类导航菜单 that.menuShow(); //加载新品特卖 that.brandShow(); },

ajax获取新品特卖数据

brandShow: function (success) { var that = this; ajax.request({ method: GET, url: activity/brands? key=+utils.key+&type=temai&page=1&size=5, success: data => { that.setData({ brands: data.result.list })console.log("brands：" + data.result.list)} }) },