商城微信小程序（二）——完成分类页面及商品列表页

分类页面预览图：

分类页面主要代码

index.js

// pages/category/index.js
import {request
} from "../../request/index.js"
Page({/*** 页面的初始数据*/data: {//左侧菜单数据leftMenuList: [],//右侧的商品数据rightContent: [],// 被点击的左侧菜单currentIndex: 0,//右侧距离顶部距离scrollTop:0,},//接口返回数据Cates: [],/*** 生命周期函数--监听页面加载*/onLoad: function (options) {/*** 1,先判断本地储存中有没有旧的缓存数据* 本地存储数据格式：* {time.Data.now(),data:[.....]}* 2，没有数据就发送请求，* 3，有旧数据且旧数据没有过期，直接使用本地储存中的旧数据*/const Cates = wx.getStorageSync("cates");if (!Cates) {//不存在，获取数据this.getCates();} else {//本地有缓存if (Date.now() - Cates.time > 1000 * 10) {//超过10s就重新发送请求this.getCates();} else {//可以使用本地缓存数据this.Cates = Cates.data;//构造左侧菜单数据let leftMenuList = this.Cates.map(v => v.cat_name);//构造右侧商品数据let rightContent = this.Cates[0].children;this.setData({leftMenuList,rightContent,})}}},//获取分类数据getCates() {request({url: "/categories"}).then(res => {this.Cates = res.data.message;//把结构数据存入本地缓存wx.setStorageSync('cates', {time: Date.now(),data: this.Cates});//构造左侧菜单数据let leftMenuList = this.Cates.map(v => v.cat_name);//构造右侧商品数据let rightContent = this.Cates[0].children;this.setData({leftMenuList,rightContent,})})},//左侧菜单的点击事件handleItemTap(e) {/*1,获取被点击菜单的索引2，给data中的currentIndex赋值3,根据不同索引渲染右侧内容*/const {index} = e.currentTarget.dataset;let rightContent = this.Cates[index].children;this.setData({currentIndex: index,rightContent,//设置右侧距离顶部距离scrollTop:0,});},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

index.json

{"usingComponents": {"SearchInput":"../../components/SearchInput/SearchInput"},"navigationBarTitleText": "商品分类"
}

index.less

vscode的easyless插件会自动生成index.wxss

/* pages/category/index.wxss */
page {height: 100%;
}.cates {height: 100%;.cates_container {// less中使用calc注意height: ~'calc(100vh - 90rpx)';display: flex;.left_menu {flex: 2;.menu_item {height: 80rpx;display: flex;justify-content: center;align-items: center;font-size: 30rpx;}.active {color: var(--themeColor);border-left: 5rpx solid currentColor;}}.right_content {flex: 5;.good_group {.good_title {height: 80rpx;display: flex;justify-content: center;align-items: center;.delimiter {color: #cccccc;padding: 0 10rpx;}.title {}}.good_list {display: flex;flex-wrap: wrap;navigator {width: 33.33%;text-align: center;image {width: 50%;}.goods_name {}}}}}}
}

index.wxml

<view class="cates"><SearchInput></SearchInput><view class="cates_container"><!-- 左侧菜单 --><scroll-view scroll-y="{{true}}" class="left_menu"><view class="menu_item {{index===currentIndex?'active':''}}" wx:for="{{leftMenuList}}" wx:key="*this"bindtap="handleItemTap"data-index="{{index}}">{{item}}</view></scroll-view><!-- 右侧菜单 --><scroll-view scroll-top="{{scrollTop}}" scroll-y="{{true}}" class="right_content"><view class="good_group"wx:for="{{rightContent}}"wx:for-index="index1"wx:for-item="item1"><view class="good_title"><text class="delimiter">/</text><text class="title">{{item1.cat_name}}</text><text class="delimiter">/</text></view><view class="good_list"><navigator class="" target="" url="/pages/goods_list/index?cid={{item2.cat_id}}" hover-class="navigator-hover" open-type="navigate"wx:for="{{item1.children}}"wx:for-index="index2"wx:for-item="item2"wx:key="cat_id"><image class="" src="{{item2.cat_icon}}" mode="widthFix" lazy-load="false" binderror="" bindload="" /><view class="goods_name">{{item2.cat_name}}</view>  </navigator></view></view></scroll-view></view>
</view>

分类页面难点记录

主要是布局文件index.less的编写，注意less语法。

商品列表页面预览

商品列表页功能：支持上拉加载更多，下拉刷新等

商品列表页主要代码：

index.js

// pages/goods_list/index.js
import {request
} from "../../request/index.js"
Page({/*** 页面的初始数据*/data: {tabs: [{id: 0,value: "综合",isActive: true,},{id: 1,value: "销量",isActive: false,},{id: 0,value: "价格",isActive: false,},],//商品列表数据goodsList: [],},//接口要的参数QueryParams: {query: "",cid: "",pagenum: 1,pagesize: 10},//总页数totalPages: 1,/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.QueryParams.cid = options.cid;this.getGoodsList();},//获取商品列表页数据getGoodsList() {request({url: "/goods/search",data: this.QueryParams,}).then(res => {//console.log(res);//数据总条数const total = res.data.message.total;//计算总页数this.totalPages = Math.ceil(total/this.QueryParams.pagesize);//console.log(this.totalPages);this.setData({goodsList:[...this.data.goodsList,... res.data.message.goods],});//手动关闭下拉刷新界面,首次进入也不会报错，无需处理wx.stopPullDownRefresh();})},//标题点击事件 从子组件Tabs传递过来的handleTabsItemChange(e) {//获取被点击的标题索引const {index} = e.detail;//修改源数组let {tabs} = this.data;tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);//赋值到data中this.setData({tabs});},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {//console.log('下拉了');//重置数组this.setData({goodsList:[],});//重置页码this.QueryParams.pagenum=1;//重新发送请求this.getGoodsList();},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {//console.log('页面触底了~~');//判断还有没有下一页数据if(this.QueryParams.pagenum>=this.totalPages){//没有下一页数据了wx.showToast({title: '没有更多数据了',});}else{this.QueryParams.pagenum++;this.getGoodsList();}},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

index.json

{"usingComponents": {"SearchInput":"../../components/SearchInput/SearchInput","Tabs":"../../components/Tabs/Tabs"},"navigationBarTitleText": "商品列表页", "enablePullDownRefresh": true,"backgroundTextStyle": "dark"
}

index.less

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

index.wxml

<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"><!-- 左侧的图片容器 --><view class="goods_img_wrap"><image class="" src="{{item.goods_small_logo}}" mode="widthFix" lazy-load="false" binderror="" bindload="" /></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>

商品列表页引用的组件Tabs主要代码

Tabs.js

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

Tabs.less

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

Tabs.wxml

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

商品列表页及Tabs组件主要技术点记录

1，父组件（商品列表页）和子组件(Tabs组件)相互传递数据问题
2,上拉加载更多、下拉刷新实现的逻辑

商城微信小程序（二）——完成分类页面及商品列表页相关推荐

零基础也能学会的微信小程序制作带分享按钮的视频列表页
零基础也能学会的微信小程序制作横向滚动布局准备工作: 微信开发者工具 APPID或测试号创建一个JavaScript基本框架(如下图) 动手做起来吧~ index.wxml 学习笔记属性说明 s ...
微信小程序实战篇-分类页面制作
https://blog.csdn.net/u012927188/article/details/73650264 转载于:https://www.cnblogs.com/bydzhangxiaowe ...
生成微信小程序二维码（携带参数跳转指定页面）
需求:生成微信小程序二维码并携带参数,扫码跳转指定页面获取WxMaService对象 WxMaDefaultConfigImpl config = new WxMaDefaultConfigImpl ...
PHP开发B2C商城微信小程序商城系统源码+数据库，轻量级前后端分离的电商系统，支持微信小程序 + H5+ 公众号 + APP
项目介绍一款轻量级.高性能.前后端分离的电商系统,支持微信小程序 + H5+ 公众号 + APP,前后端源码完全开源,看见及所得,完美支持二次开发,可学习可商用,让您快速搭建个性化独立商城. 完整代 ...
vue+uni-app商城实战 | 第一篇：从0到1快捷开发一个商城微信小程序，无缝接入OAuth2实现一键授权登录
一. 前言本篇通过实战来讲述如何使用uni-app快速进行商城微信小程序的开发以及小程序如何接入后台Spring Cloud微服务. 有来商城 youlai-mall 项目是一套全栈商城系统,技术栈 ...
怎么开发商城微信小程序？【商城小程序】
在现代社会中,随着微信的普及和使用,开发商城微信小程序成为了一个新的热门话题.有些人认为这个领域是最有发展前景的,而有些人则认为这并不是适合所有人的行业.但是无论如何,这都值得我们去探索.那么下面就跟 ...
云开发制作二手商城微信小程序
从零到有云开发制作二手商城微信小程序步入大三,和几个小伙伴用三周时间一起制作了一个小程序. 我们刚开始尝试了微信JS前端+JAVA后台的方法,但是由于缺少前端后台传数据的知识,最终选择了云开发的方式 ...
微信小程序拼团功能页面展示
微信小程序拼团功能页面展示一.拼团功能拼团就是让消费者在优惠价格的吸引下,自发邀请好友组团,以优惠的价格购买商品的促销活动二.拼团功能的作用 1.与纯粹的购物相比,这种营销方式迎合了大多数用户的 ...
（已更新）全新商城微信小程序源码支持对接公众号
运行环境Linux+Nginx+PHP7.4+MySQL(5.6|5.7) 一键安装 1.上传你的代码 2.项目目录设置755权限 3.设置伪静态规则(nginx 推荐使用) 复制代码location ...

商城微信小程序（二）——完成分类页面及商品列表页

分类页面预览图：

分类页面主要代码

index.js

index.json

index.less

index.wxml

分类页面难点记录

商品列表页面预览

商品列表页主要代码：

index.js

index.json

index.less

index.wxml

商品列表页引用的组件Tabs主要代码

Tabs.js

Tabs.less

Tabs.wxml

商品列表页及Tabs组件主要技术点记录

商城微信小程序（二）——完成分类页面及商品列表页相关推荐

最新文章

热门文章