300字范文 > 【愚公系列】11月微信小程序-优购电商项目-商品列表⻚⾯

【愚公系列】11月微信小程序-优购电商项目-商品列表⻚⾯

时间：2019-08-12 00:33:56

文章目录

前言一、商品列表⻚⾯1.业务逻辑2.涉及的接口数据3. 关键技术二、商品列表⻚⾯相关代码1.tabs组件2.页面代码3.效果

前言

商品详情页是展示商品详细信息的一个页面，承载在网站的大部分流量和订单的入口。京东商城目前有通用版、全球购、闪购、易车、惠买车、服装、拼购、今日抄底等许多套模板。各套模板的元数据是一样的，只是展示方式不一样。目前商品详情页个性化需求非常多，数据来源也是非常多的，而且许多基础服务做不了的都放我们这，因此我们需要一种架构能快速响应和优雅的解决这些需求问题。因此我们重新设计了商品详情页的架构，主要包括三部分：商品详情页系统、商品详情页统一服务系统和商品详情页动态服务系统；商品详情页系统负责静的部分，而统一服务负责动的部分，而动态服务负责给内网其他系统提供一些数据服务。

一、商品列表⻚⾯

1.业务逻辑

加载商品列表数据启⽤下拉⻚⾯功能⻚⾯的json⽂件中开启设置 enablePullDownRefresh:true⻚⾯的js中，绑定事件 onPullDownRefresh启⽤上拉⻚⾯功能 onReachBottom ⻚⾯触底事件加载下⼀⻚功能

2.涉及的接口数据

商品列表搜索

{"message": {"total": 57445, "pagenum": 1, "goods": [{"goods_id": 57445, "cat_id": 9, "goods_name": "创维（Skyworth）65V9E 65英寸25核4K HDR高清智能电视", "goods_price": 6499, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "", "goods_small_logo": "", "add_time": 1516663280, "upd_time": 1516663280, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57444, "cat_id": 9, "goods_name": "创维（Skyworth）42X6 42英寸10核智能酷开网络平板液晶电视（黑色）", "goods_price": 1899, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "/uimg/b2c/newcatentries/0070078057-000000000634917020_1_800x800.jpg", "goods_small_logo": "/uimg/b2c/newcatentries/0070078057-000000000634917020_1_400x400.jpg", "add_time": 1516663280, "upd_time": 1516663280, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57443, "cat_id": 9, "goods_name": "创维(Skyworth) 65M6E 65英寸 4K超高清智能酷开网络液晶电视", "goods_price": 4999, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "", "goods_small_logo": "", "add_time": 1516663280, "upd_time": 1516663280, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57442, "cat_id": 9, "goods_name": "创维彩电40G6A", "goods_price": 2999, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "/uimg/b2c/newcatentries/0000000000-000000000601395527_1_800x800.jpg", "goods_small_logo": "/uimg/b2c/newcatentries/0000000000-000000000601395527_1_400x400.jpg", "add_time": 1516663277, "upd_time": 1516663277, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57441, "cat_id": 9, "goods_name": "创维(Skyworth) G7 4K超高清彩电HDR 智能网络液晶平板电视(玫瑰金) 65G7 (65英寸)", "goods_price": 9699, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "/uimg/b2c/newcatentries/0000000000-000000000168415104_1_800x800.jpg", "goods_small_logo": "/uimg/b2c/newcatentries/0000000000-000000000168415104_1_400x400.jpg", "add_time": 1516663273, "upd_time": 1516663273, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57440, "cat_id": 9, "goods_name": "创维彩电55G3", "goods_price": 4699, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "/uimg/b2c/newcatentries/0000000000-000000000632066713_1_800x800.jpg", "goods_small_logo": "/uimg/b2c/newcatentries/0000000000-000000000632066713_1_400x400.jpg", "add_time": 1516663269, "upd_time": 1516663269, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57439, "cat_id": 9, "goods_name": "创维电视55G720S 55英寸4色4K 23核智能彩电网络液晶平板电视", "goods_price": 4999, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "/uimg/b2c/newcatentries/0000000000-000000000611474169_1_800x800.jpg", "goods_small_logo": "/uimg/b2c/newcatentries/0000000000-000000000611474169_1_400x400.jpg", "add_time": 1516663265, "upd_time": 1516663265, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57438, "cat_id": 9, "goods_name": "创维（Skyworth）55H9A 55英寸超薄全面屏 4K超高清智能电视(黑色)", "goods_price": 3999, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "/uimg/b2c/newcatentries/0000000000-000000000185518945_2_800x800.jpg", "goods_small_logo": "/uimg/b2c/newcatentries/0000000000-000000000185518945_2_400x400.jpg", "add_time": 1516663261, "upd_time": 1516663261, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57437, "cat_id": 9, "goods_name": "创维（Skyworth）55V6 55英寸 4色4K超高清 18核智能网络液晶电视银色", "goods_price": 3099, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "/uimg/b2c/newcatentries/0070078057-000000000136928577_1_800x800.jpg", "goods_small_logo": "/uimg/b2c/newcatentries/0070078057-000000000136928577_1_400x400.jpg", "add_time": 1516663258, "upd_time": 1516663258, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57436, "cat_id": 9, "goods_name": "创维(Skyworth) 43M9 43英寸 4K超高清智能网络LED液晶平板电视", "goods_price": 2399, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "/uimg/b2c/newcatentries/0070078057-000000000751129836_1_800x800.jpg", "goods_small_logo": "/uimg/b2c/newcatentries/0070078057-000000000751129836_1_400x400.jpg", "add_time": 1516663255, "upd_time": 1516663255, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57435, "cat_id": 9, "goods_name": "创维(Skyworth) G7 4K超高清彩电HDR 智能网络液晶平板电视(玫瑰金) 50G7 (50英寸)", "goods_price": 4999, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "/uimg/b2c/newcatentries/0000000000-000000000174647582_1_800x800.jpg", "goods_small_logo": "/uimg/b2c/newcatentries/0000000000-000000000174647582_1_400x400.jpg", "add_time": 1516663249, "upd_time": 1516663249, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57434, "cat_id": 9, "goods_name": "创维（Skyworth）60V8E 60英寸 4色4K 21核金属机身超高清智能网络液晶电视（金色）", "goods_price": 4499, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "/uimg/b2c/newcatentries/0070078057-000000000154099975_1_800x800.jpg", "goods_small_logo": "/uimg/b2c/newcatentries/0070078057-000000000154099975_1_400x400.jpg", "add_time": 1516663246, "upd_time": 1516663246, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57433, "cat_id": 9, "goods_name": "创维(skyworth) 55V8E 55英寸 4K超高清HDR纤薄全金属机身智能酷开网络液晶电视", "goods_price": 3299, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "/uimg/b2c/newcatentries/0070078057-000000000153983248_1_800x800.jpg", "goods_small_logo": "/uimg/b2c/newcatentries/0070078057-000000000153983248_1_400x400.jpg", "add_time": 1516663242, "upd_time": 1516663242, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57432, "cat_id": 9, "goods_name": "创维(Skyworth) 58V6 58英寸 4K超高清智能网络LED液晶平板电视", "goods_price": 3299, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "/uimg/b2c/newcatentries/0000000000-000000000137137563_1_800x800.jpg", "goods_small_logo": "/uimg/b2c/newcatentries/0000000000-000000000137137563_1_400x400.jpg", "add_time": 1516663239, "upd_time": 1516663239, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57431, "cat_id": 9, "goods_name": "创维（Skyworth）55E5 55吋4K超高清智能电视", "goods_price": 2956, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "/uimg/b2c/newcatentries/0000000000-000000000147767325_1_800x800.jpg", "goods_small_logo": "/uimg/b2c/newcatentries/0000000000-000000000147767325_1_400x400.jpg", "add_time": 1516663236, "upd_time": 1516663236, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57430, "cat_id": 9, "goods_name": "创维（Skyworth）65M9 65英寸15核HDR 4K超高清智能电视", "goods_price": 0, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "", "goods_small_logo": "", "add_time": 1516663233, "upd_time": 1516663233, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57429, "cat_id": 9, "goods_name": "创维（Skyworth）50M9 50英寸15核HDR 4K超高清智能电视", "goods_price": 2603, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "", "goods_small_logo": "", "add_time": 1516663213, "upd_time": 1516663213, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57428, "cat_id": 9, "goods_name": "创维.PPTV W42S 42英寸全高清智能网络LED液晶平板电视", "goods_price": 1799, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "/uimg/b2c/newcatentries/0000000000-000000000721208036_1_800x800.jpg", "goods_small_logo": "/uimg/b2c/newcatentries/0000000000-000000000721208036_1_400x400.jpg", "add_time": 1516663210, "upd_time": 1516663210, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57427, "cat_id": 9, "goods_name": "创维(Skyworth) 32X6 32英寸高清智能网络LED液晶平板电视", "goods_price": 1201, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "/uimg/b2c/newcatentries/0000000000-000000000775604287_1_800x800.jpg", "goods_small_logo": "/uimg/b2c/newcatentries/0000000000-000000000775604287_1_400x400.jpg", "add_time": 1516663203, "upd_time": 1516663203, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}, {"goods_id": 57426, "cat_id": 9, "goods_name": "创维（Skyworth）55M9 55英寸15核HDR 4K超高清智能电视M7", "goods_price": 2999, "goods_number": 100, "goods_weight": 100, "goods_big_logo": "", "goods_small_logo": "", "add_time": 1516663200, "upd_time": 1516663200, "hot_mumber": 0, "is_promote": false, "cat_one_id": 1, "cat_two_id": 3, "cat_three_id": 9}]}, "meta": {"msg": "获取成功", "status": 200}}

3. 关键技术

⼩程序配置⽂件中启⽤上拉和下拉功能

搜索框和tab栏是⼩程序的⾃定义组件(有组件事件和参数交互)

二、商品列表⻚⾯相关代码

1.tabs组件

<view class="tabs"><view class="tabs_title"><viewwx:for="{{tabs}}"wx:key="id"class="title_item {{item.isActive?'active':''}} "bindtap="handleItemTap"data-index="{{index}}">{{item.value}}</view></view><view class="tabs_content"><slot></slot></view></view>

// components/Tabs/Tabs.jsComponent({/*** 组件的属性列表*/properties: {tabs:{type:Array,value:[]}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {// 点击事件handleItemTap(e){// 1 获取点击的索引const {index}=e.currentTarget.dataset;// 2 触发父组件中的事件自定义this.triggerEvent("tabsItemChange",{index});}}})

.tabs{}.tabs_title{display: flex;}.title_item{display: flex;justify-content: center;align-items: center;flex: 1;padding: 15rpx 0;}.active{color:var(--themeColor);border-bottom: 5rpx solid currentColor;}.tabs_content{}

2.页面代码

<SearchInput></SearchInput><Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange" ><block wx:if="{{tabs[0].isActive}}"><view class="first_tab"><navigator class="goods_item"wx:for="{{goodsList}}"wx:key="goods_id"url="/pages/goods_detail/index?goods_id={{item.goods_id}}"><view class="goods_img_wrap"><image mode="widthFix" src="{{item.goods_small_logo?item.goods_small_logo:'/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'}}"></image></view><view class="goods_info_wrap"><view class="goods_name">{{item.goods_name}}</view><view class="goods_price">￥{{item.goods_price}}</view></view></navigator></view></block><block wx:elif="{{tabs[1].isActive}}">1</block><block wx:elif="{{tabs[2].isActive}}">2</block></Tabs>

/* 1 用户上滑页面滚动条触底开始加载下一页数据1 找到滚动条触底事件微信小程序官方开发文档寻找2 判断还有没有下一页数据1 获取到总页数只有总条数总页数 = Math.ceil(总条数 / 页容量 pagesize)总页数= Math.ceil( 23 / 10 ) = 32 获取到当前的页码 pagenum3 判断一下当前的页码是否大于等于总页数表示没有下一页数据3 假如没有下一页数据弹出一个提示4 假如还有下一页数据来加载下一页数据1 当前的页码 ++2 重新发送请求3 数据请求回来要对data中的数组进行拼接而不是全部替换！！！2 下拉刷新页面1 触发下拉刷新事件需要在页面的json文件中开启一个配置项找到触发下拉刷新的事件2 重置数据数组 3 重置页码设置为14 重新发送请求5 数据请求回来需要手动的关闭等待效果*/import {request } from "../../request/index.js";import regeneratorRuntime from '../../lib/runtime/runtime';Page({data: {tabs: [{id: 0,value: "综合",isActive: true},{id: 1,value: "销量",isActive: false},{id: 2,value: "价格",isActive: false}],goodsList:[]},// 接口要的参数QueryParams:{query:"",cid:"",pagenum:1,pagesize:10},// 总页数totalPages:1,/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.QueryParams.cid=options.cid||"";this.QueryParams.query=options.query||"";this.getGoodsList();},// 获取商品列表数据async getGoodsList(){const res=await request({url:"/goods/search",data:this.QueryParams});// 获取总条数const total=res.total;// 计算总页数this.totalPages=Math.ceil(total/this.QueryParams.pagesize);// console.log(this.totalPages);this.setData({// 拼接了数组goodsList:[...this.data.goodsList,...res.goods]})// 关闭下拉刷新的窗口如果没有调用下拉刷新的窗口直接关闭也不会报错 wx.stopPullDownRefresh();},// 标题点击事件从子组件传递过来handleTabsItemChange(e){// 1 获取被点击的标题索引const {index}=e.detail;// 2 修改源数组let {tabs}=this.data;tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);// 3 赋值到data中this.setData({tabs})},// 页面上滑滚动条触底事件onReachBottom(){// 1 判断还有没有下一页数据if(this.QueryParams.pagenum>=this.totalPages){// 没有下一页数据// console.log('%c'+"没有下一页数据","color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)");wx.showToast({title: '没有下一页数据' });}else{// 还有下一页数据// console.log('%c'+"有下一页数据","color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)");this.QueryParams.pagenum++;this.getGoodsList();}},// 下拉刷新事件 onPullDownRefresh(){// 1 重置数组this.setData({goodsList:[]})// 2 重置页码this.QueryParams.pagenum=1;// 3 发送请求this.getGoodsList();}})

/* pages/goods_list/index.wxss */.first_tab .goods_item {display: flex;border-bottom: 1px solid #ccc;}.first_tab .goods_item .goods_img_wrap {flex: 2;display: flex;justify-content: center;align-items: center;}.first_tab .goods_item .goods_img_wrap image {width: 70%;}.first_tab .goods_item .goods_info_wrap {flex: 3;display: flex;flex-direction: column;justify-content: space-around;}.first_tab .goods_item .goods_info_wrap .goods_name {display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}.first_tab .goods_item .goods_info_wrap .goods_price {color: var(--themeColor);font-size: 32rpx;}