微信小程序微商城（六）：动态API实现新品特卖商品流式布局
2024-07-02 18:38:26
IT实战联盟博客：http://blog.100boot.cn
上一篇：微信小程序微商城（五）：动态API实现商品详情页（下）
看效果
开发计划
1、新品特卖商品列表布局
2、调用动态API获取数据并加载
3、点击商品跳转商品详情根据商品ID获取商品详情API数据模型
访问：https://100boot.cn/ 选择微商城案例，如下图所示：
下方还有详细的数据模型可以查看哦！
brand.wxml
<scroll-view scroll-y="true" style="height:{{scrollH}}px" bindscrolltolower="brandShow"><view class="goods" style="width:100%"><view class="mg_item"><view wx:for="{{col1}}" wx:key="id"><view class="item_info" catchtap="catchTapCategory" data-goodsid="{{item.id}}"><image src="{{item.imgUrl}}" style="width:100%;height:{{item.height}}px"></image></view><view class="product-name">{{item.name}} </view><view class="product-price-wrap"><p class="product-price-new">￥{{item.price}}</p> <p class="product-price-old">￥{{item.privilegePrice}}</p> <p class="discount">{{item.discount}}折</p> </view></view></view><view class="mg_item"><view wx:for="{{col2}}" wx:key="id" ><view class="item_info" catchtap="catchTapCategory" data-goodsid="{{item.id}}"><image src="{{item.imgUrl}}" style="width:100%;height:{{item.height}}px"></image></view><view class="product-name">{{item.name}} </view><view class="product-price-wrap"><p class="product-price-new">￥{{item.price}}</p> <p class="product-price-old">￥{{item.privilegePrice}}</p> <p class="discount">{{item.discount}}折</p> </view></view></view></view></scroll-view><view style="display:none"><image wx:for="{{brandGoods}}" wx:key="id" id="{{item.id}}" src="{{item.imgUrl}}" bindload="onImageLoad1"></image></view> <view class="weui-loadmore" hidden="{{hidden}}"><view class="weui-loading"></view><view class="weui-loadmore__tips">努力加载中</view></view> brand.wxss
page{ height: 100%; background-color: #F3F4F6;
}
/* 单个图片容器的样式 */
.img_item {
width: 48.5%;
margin: 2px;
display: inline-block;
vertical-align: top;
background-color: #ffffff;
font-size: 24rpx;
}
.item_info{
border-top:5px solid #F3F4F6;
}
.product-name{
color: #000; /* height: 28px; */text-align:left; margin: 0px 5px; margin-bottom: 5px;
}
.product-price-wrap .product-price-new{
color: #e80080;
margin-left:5px;
font-weight:900;
}
.product-price-wrap .product-price-old{
color: #888;
text-decoration: line-through;
padding-left: 2px;
}
.product-price-wrap .discount{
margin-left: 30px;
background-color: #000;
color: #fff;
}
/* 加载更多 */.weui-loading {
margin: 0 5px;
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
-webkit-animation: weuiLoading 1s steps(12, end) infinite;
animation: weuiLoading 1s steps(12, end) infinite;
background: transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;
background-size: 100%;
}
.weui-loadmore {
width: 65%;
margin: 1.5em auto;
line-height: 1.6em;
font-size: 12px;
text-align: center;
}
.weui-loadmore__tips {
display: inline-block;
vertical-align: middle;
color: #888;
}brand.js
const ajax = require('../../utils/ajax.js');
const utils = require('../../utils/util.js');
var sectionData = [];
var ifLoadMore = null;
var activityId = null;
var page = 1;//默认第一页Page({
data: {
scrollH: 0,
imgWidth: 0,
loadingCount: 0,
images: [],
col1: [],
col2: []},
onLoad: function (options) {activityId = options.activityId;page = 1; console.log('activityId:' + activityId);wx.getSystemInfo({ success: (res) => { let ww = res.windowWidth; let wh = res.windowHeight; let imgWidth = ww * 0.48; let scrollH = wh; this.setData({ scrollH: scrollH, imgWidth: imgWidth}); //加载首组图片// this.loadImages();this.brandShow();}})},
onImageLoad1: function (e) { let imageId = e.currentTarget.id; let oImgW = e.detail.width; //图片原始宽度let oImgH = e.detail.height; //图片原始高度let imgWidth = this.data.imgWidth; //图片设置的宽度let scale = imgWidth / oImgW; //比例计算let imgHeight = oImgH * scale; //自适应高度let images = this.data.brandGoods; let imageObj = null; for (let i = 0; i < images.length; i++) { let img = images[i]; if (img.id+"" === imageId) {imageObj = img; break;}}imageObj.height = imgHeight; let loadingCount = this.data.loadingCount - 1; let col1 = this.data.col1; let col2 = this.data.col2; //判断当前图片添加到左列还是右列if (col1.length <= col2.length) {col1.push(imageObj);} else {col2.push(imageObj);} let data = { loadingCount: loadingCount, col1: col1, col2: col2}; //当前这组图片已加载完毕，则清空图片临时加载区域的内容if (!loadingCount) {data.images = [];} this.setData(data);}, brandShow: function (success) { var that = this; console.log(page)ajax.request({ method: 'GET', url: 'goods/getActivityGoodsList?key=' + utils.key + '&activityId=' + activityId+'&page=' + page + '&size=10', success: data => { var newGoodsData = data.result.list;page += 1; if (ifLoadMore) { //加载更多if (newGoodsData.length > 0) { console.log(newGoodsData)sectionData['brandGoods'] = newGoodsData;} else {ifLoadMore = false; this.setData({ hidden: true})wx.showToast({ title: '暂无更多内容！', icon: 'loading', duration: 2000})}} else { if (ifLoadMore == null) {ifLoadMore = true;sectionData['brandGoods'] = newGoodsData;//刷新}}that.setData({ brandGoods: sectionData['brandGoods'], loadingCount: sectionData['brandGoods'].length,}); console.log(that.data.brandGoods)wx.stopPullDownRefresh();//结束动画}})},
catchTapCategory: function (e) { var that = this; var goodsId = e.currentTarget.dataset.goodsid; console.log('goodsId:' + goodsId); //新增商品用户点击数量that.goodsClickShow(goodsId); //跳转商品详情wx.navigateTo({ url: '../detail/detail?goodsId=' + goodsId })},goodsClickShow(goodsId) { console.log('增加商品用户点击数量'); var that = this;ajax.request({ method: 'GET', url: 'goods/addGoodsClickRate?key=' + utils.key + '&goodsId=' + goodsId, success: data => { console.log("用户点击统计返回结果：" + data.message)}})},
})备注
微信小程序微商城系列 都是通过https 动态获取数据并展示的，建议从第一篇开始阅读。大家多多支持本系列文章会继续更新下去，谢谢各位！大家在使用过程中有哪些建议可以提出来，我们一起学习哈~~~
微信小程序微商城系列
微信小程序微商城：开发者key获取
微信小程序微商城（一）：https框架搭建并实现导航功能
微信小程序微商城（二）：电商首页轮播、分类导航和新品特卖实现
微信小程序微商城（三）：电商首页福利专场无限下拉刷新动态API数据实现
微信小程序微商城（四）：动态API实现商品详情页（上）
微信小程序微商城（五）：动态API实现商品详情页（下）
关注我们
如果需要源码可以关注“IT实战联盟”公*众*号并留言（微商城源码，5个字会收到源码下载地址，一定要看源码里面的操作手册会少走很多弯路），也可以加入交流群和作者互撩哦~~~
IT实战联盟博客：http://blog.100boot.cn
微信小程序微商城（六）：动态API实现新品特卖商品流式布局相关推荐
- 微信小程序微商城（九）：微信授权并实现个人中心页面页面
IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序微商城(八):缓存实现商品购物车功能 看效果 开发计划 1.实现微信授权并获取用户信息 2.个人中心页面布局 一.实现 ...
- 微信小程序微商城（八）：缓存实现商品购物车功能
IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序微商城(七):动态API实现商品分类 看效果 购物车.gif 开发计划 1.商品详情页将商品信息放入缓存 2.购物车页 ...
- 微信小程序微商城（五）：动态API实现商品详情页（下）
IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序微商城(四):动态API实现商品详情页(上) 看效果 加入购物车.gif 开发计划 1.加入购物车悬浮框.商品数量.价 ...
- 微信小程序srt_微信小程序微商城（八）：缓存实现商品购物车功能
看效果web 购物车.gif小程序 开发计划微信小程序 一.商品详情页将商品信息放入缓存 二.购物车页面读取缓存获取商品信息 三.购物车商品计算和删除缓存商品 1.商品详情页将商品信息放入缓存数组 d ...
- 免费的小程序微商城系统它不香吗？
互联网市场更新迭代很快,基本5年左右就能完成一个周期的技术升级,这不,微信小程序微商城系统刚火不久,现在市面上很多类似系统就开始宣传永久免费使用了.这是为什么呢,他们没有成本吗?他们不想赚钱吗?现在我 ...
- 分析：很多小程序微商城系统为什么敢永久免费使用
互联网市场更新迭代很快,基本5年左右就能完成一个周期的技术升级,这不,微信小程序微商城系统刚火不久,现在市面上很多类似系统就开始宣传永久免费使用了.这是为什么呢,他们没有成本吗?他们不想赚钱吗?现在我 ...
- 微信小程序学习总结(六) --- API
微信小程序学习总结(六) - API API 规则: 1 . 都是以wx.开头 2. 以wx.on开头的是监听某个事件的API接口,接受一个回调函数作为参数 3. api大多是异步的函数,接受Obje ...
- 搭建公众号微商城+小程序微商城 企业商城系统一条龙 拖拽可视化装修模板
搭建公众号微商城+小程序微商城 企业商城系统一条龙 拖拽可视化装修模板 来源:廖万里的博客 www.kkkliao.cn 本程序需有认证服务号!或者认证小程序 微信支付走官方接口! 没有的话 自己准 ...
- 微信小程序开发【六】-- wxss详解
系列文章目录 微信小程序开发[一]-- 初识小程序 传送门 微信小程序开发[二]-- 小程序入门 传送门 微信小程序开发[三]-- 项目结构概述 传送门 微信小程序开发[四]-- 配置详解 传送门 微 ...
- 微信小程序城市定位(百度地图API)
概述 微信小程序提供一些API(地址)用于获取当前用户的地理位置等信息,但无论是wx.getLocation,还是wx.chooseLocation均没有单独的字段表示国家与城市信息,仅有经纬度信息. ...
最新文章
- C++求数组中的逆序对
- 《 郝斌 java自学视频 完结 》_《[郝斌]Java自学视频[完结]》AVI[压缩包]
- 成功解决AttributeError: module 'numpy' has no attribute 'integer'
- mate7刷android 6.0,华为Mate7 6.0系统刷recovery_Mate7 6.0专用第三方recovery
- Luban(鲁班)——可能是最接近微信朋友圈的图片压缩算法
- bs架构 erp 进销存_从应用架构看生鲜电商信息化建设
- rust怎么拆除墙壁指令_拆除墙体前准备：区分承重墙与非承重墙，拆错影响整栋楼房...
- centos arm-linux-gcc,CentOS 5.5下arm-linux-gcc交叉编译环境的搭建
- Redis10-RDB持久化
- storm32和pixhawk_storm32三轴手持增稳云台项目实现代码 storm32 bgc手持云台增稳的代码 - 下载 - 搜珍网...
- php个人财务管理,PHP个人理财管理系统的设计与实现
- Matlab读取excel文件绘制折线图
- 进制转化——2022蓝桥杯（E题）
- 全国离婚率下跌约五成是因为它？
- mysql初始化密码_MySQL5.7初始密码查看及重置
- C语言 - 计算n的阶乘(n!)
- 安卓手机网上商城-2号店
- [Solved] Pycharm 提示Unresolved reference
- 26.SSR解决了什么问题？有做过SSR吗？你是怎么做的？
- 千兆工业交换机和百兆以太网交换机有什么区别？