小程序学习3 goods-card

news/2024/5/25 10:02:36/文章来源:https://blog.csdn.net/xinzhengLUCK/article/details/136712142

pages/home/home

        home.wxml

  <goods-listwr-class="goods-list-container"goodsList="{{goodsList}}"bind:click="goodListClickHandle"bind:addcart="goodListAddCartHandle"/>

<goods-list>是一个自定义组件,它具有以下属性和事件:

属性:

  • wr-class:用于设置组件容器的样式类名。
  • goodsList:用于传递商品列表数据给组件。

事件:

  • click:当用户点击商品列表中的某个商品时触发该事件,可以通过绑定该事件来执行相应的处理函数。
  • addcart:当用户点击商品列表中的添加购物车按钮时触发该事件,可以通过绑定该事件来执行相应的处理函数。

可以根据需要设置wr-class属性来自定义组件的样式,同时通过goodsList属性传递商品列表数据给组件。另外,你还可以绑定click事件和addcart事件来处理用户的点击操作。

        home.json

"usingComponents": {"goods-list": "/components/goods-list/index",
}

        home.js

import { fetchHome } from '../../services/home/home';
import { fetchGoodsList } from '../../services/good/fetchGoods';
import Toast from 'tdesign-miniprogram/toast/index';Page({data: {imgSrcs: [],tabList: [],goodsList: [],goodsListLoadStatus: 0,pageLoading: false,current: 1,autoplay: true,duration: '500',interval: 5000,navigation: { type: 'dots' },swiperImageProps: { mode: 'scaleToFill' },},goodListPagination: {index: 0,num: 10,},privateData: {tabIndex: 0,},onShow() {this.getTabBar().init();},onLoad() {this.init();},onReachBottom() {if (this.data.goodsListLoadStatus === 0) {this.loadGoodsList();}},onPullDownRefresh() {this.init();},init() {this.loadHomePage();},loadHomePage() {wx.stopPullDownRefresh();this.setData({pageLoading: true,});fetchHome().then(({ swiper, tabList }) => {this.setData({tabList,imgSrcs: swiper,pageLoading: false,});this.loadGoodsList(true);});},tabChangeHandle(e) {this.privateData.tabIndex = e.detail;this.loadGoodsList(true);},onReTry() {this.loadGoodsList();},async loadGoodsList(fresh = false) {if (fresh) {wx.pageScrollTo({scrollTop: 0,});}this.setData({ goodsListLoadStatus: 1 });const pageSize = this.goodListPagination.num;let pageIndex = this.privateData.tabIndex * pageSize + this.goodListPagination.index + 1;if (fresh) {pageIndex = 0;}try {const nextList = await fetchGoodsList(pageIndex, pageSize);this.setData({goodsList: fresh ? nextList : this.data.goodsList.concat(nextList),goodsListLoadStatus: 0,});this.goodListPagination.index = pageIndex;this.goodListPagination.num = pageSize;} catch (err) {this.setData({ goodsListLoadStatus: 3 });}},goodListClickHandle(e) {const { index } = e.detail;const { spuId } = this.data.goodsList[index];wx.navigateTo({url: `/pages/goods/details/index?spuId=${spuId}`,});},goodListAddCartHandle() {Toast({context: this,selector: '#t-toast',message: '点击加入购物车',});},navToSearchPage() {wx.navigateTo({ url: '/pages/goods/search/index' });},navToActivityDetail({ detail }) {const { index: promotionID = 0 } = detail || {};wx.navigateTo({url: `/pages/promotion-detail/index?promotion_id=${promotionID}`,});},
});
 解析:async loadGoodsList(fresh = false) {

说白了,这段儿代码就是鼠标滚轮往下拉,商品列表就刷刷刷的往外刷

这段代码是一个异步函数loadGoodsList,它接受一个参数fresh,默认为false。函数的作用是加载商品列表。

首先,如果freshtrue,则调用wx.pageScrollTo函数将页面滚动到顶部。

然后,通过调用setData方法将goodsListLoadStatus设置为1,表示正在加载商品列表。

接下来,根据当前的页码和每页的数量计算出要请求的页码。如果freshtrue,则将页码设置为0。

然后,使用fetchGoodsList函数异步获取商品列表。获取到列表后,通过调用setData方法将goodsList更新为新的列表。如果是刷新操作,则直接使用新的列表;如果是加载更多操作,则将新的列表与原有列表合并。同时,将goodsListLoadStatus设置为0,表示加载完成。

最后,更新分页信息,将页码和每页数量保存到goodListPagination对象中。

如果在获取商品列表过程中发生错误,则通过调用setData方法将goodsListLoadStatus设置为3,表示加载失败。

  goodListAddCartHandle() {  }
 goodListAddCartHandle() {Toast({context: this,selector: '#t-toast',message: '点击加入购物车',});},

TDesign    Toast 轻提示

用于轻量级反馈或提示,不会打断用户操作。

goodListAddCartHandle()是一个函数,用于处理点击加入购物车的操作。在函数内部,它会调用Toast组件来显示一个提示消息,提示用户已成功将商品加入购物车。

在函数中,Toast组件的参数包括:

  • context:表示上下文,即函数所在的环境或组件。
  • selector:表示选择器,用于指定要显示提示消息的位置。
  • message:表示要显示的提示消息内容,这里是"点击加入购物车"。

这样,当用户点击加入购物车时,函数会调用Toast组件来显示提示消息。

components/goods-list

        index.wxml

<view class="goods-list-wrap wr-class" id="{{independentID}}"><block wx:for="{{goodsList}}" wx:for-item="item" wx:key="index"><goods-cardid="{{independentID}}-gd-{{index}}"data="{{item}}"currency="{{item.currency || '¥'}}"thresholds="{{thresholds}}"class="goods-card-inside"data-index="{{index}}"bind:thumb="onClickGoodsThumb"bind:click="onClickGoods"bind:add-cart="onAddCart"/></block>
</view>

        index.json

{"component": true,"usingComponents": {"goods-card": "/components/goods-card/index"}
}

components/goods-card

        index.wxml

<viewid="{{independentID}}"class="goods-card"bind:tap="clickHandle"data-goods="{{ goods }}"
><view class="goods-card__main"><view class="goods-card__thumb" bind:tap="clickThumbHandle"><t-imagewx:if="{{ !!goods.thumb }}"t-class="goods-card__img"src="{{ goods.thumb }}"mode="aspectFill"lazy-load/></view><view class="goods-card__body"><view class="goods-card__upper"><view wx:if="{{ goods.title }}" class="goods-card__title">{{ goods.title }}</view><view wx:if="{{ goods.tags && !!goods.tags.length }}" class="goods-card__tags"><viewwx:for="{{ goods.tags }}"wx:key="index"wx:for-item="tag"class="goods-card__tag"data-index="{{index}}">{{tag}}</view></view></view><view class="goods-card__down"><pricewx:if="{{ goods.price }}"wr-class="spec-for-price"symbol-class="spec-for-symbol"symbol="{{currency}}"price="{{goods.price}}"/><pricewx:if="{{ goods.originPrice && isValidityLinePrice }}"wr-class="goods-card__origin-price"symbol="{{currency}}"price="{{goods.originPrice}}"type="delthrough"/><t-iconclass="goods-card__add-cart"prefix="wr"name="cartAdd"id="{{independentID}}-cart"data-id="{{independentID}}"catchtap="addCartHandle"size="48rpx"color="#FA550F"/></view></view></view>
</view>
  <view class="goods-card__main">

TDesign  mode为   裁切

lazy-load

懒加载(Lazy Load)是一种延迟加载的策略,它在编程中常用于优化系统性能和资源利用。懒加载的核心思想是将对象的创建或数据的加载推迟到真正需要的时候再进行,而不是在初始化阶段就立即进行。

懒加载的优点是可以减少系统启动时间和内存占用,特别适用于大型系统或者需要加载大量资源的场景。通过懒加载,可以避免不必要的资源浪费,提高系统的响应速度和效率。

在软件开发中,懒加载可以应用于多个方面,比如:

  1. 对象的懒加载:当一个对象在程序中被创建时,并不立即初始化其成员变量或关联对象,而是在真正需要使用时才进行初始化。这样可以避免不必要的对象创建和资源消耗。

  2. 数据库查询的懒加载:在使用ORM(对象关系映射)框架进行数据库操作时,可以延迟加载关联对象的数据。只有当访问关联对象时才会触发实际的数据库查询操作,从而减少数据库访问次数和提高查询效率。

  3. 图片或文件的懒加载:在网页或移动应用中,可以延迟加载图片或文件资源。当用户滚动到可见区域时,再进行实际的资源加载,避免一次性加载大量资源导致页面卡顿或流量浪费。

       index.json

{"component": true,"usingComponents": {"price": "/components/price/index","t-icon": "tdesign-miniprogram/icon/icon","t-image": "/components/webp-image/index"}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1007553.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是制作视频内容?如何搞好视频内容制作?

写在前面 视频内容已成为希望吸引数字观众的企业、品牌和创作者的必备资产。事实上&#xff0c;根据NogenTech的一份报告&#xff0c;在2023年&#xff0c;91%的营销部门使用了这种动态内容。 视频内容创作和优化性能的技巧和窍门的增加绝非巧合。TikTok以及Instagram Reels和…

BMJ杂志方法学推荐:断点回归方法

直播课程 郑老师本周六&#xff1a;真实世界临床研究直播课&#xff08;点击了解详情&#xff09; 2024年2月27日&#xff0c;顶级医学期刊BMJ发表了一篇有关断点回归设计研究的指南&#xff0c;文中所介绍的断点回归既具有类似随机对照组的优势&#xff0c;又能依托于观察性研…

软考--软件设计师(磁盘管理的例题)

流水线的理论公式&#xff1a; 单缓冲区&#xff1a;同一时间内只能允许一个进程进行写入读出&#xff0c;所以每个盘块经过缓冲区的时间是&#xff08;155微秒&#xff09;&#xff0c;之后再用1微秒的时间进行处理。在处理的同时&#xff0c;下一个盘块写入缓冲区&#xff0c…

增删卜易——八宫六十四卦

之前看倪海厦的《天纪》笔记里面提到了六十四卦世应,觉得不知道这个世应是啥意思。很长时间就没看了,偶然间看到了张文江教授写的一本书《潘雨廷先生谈话录》提到了《卜筮正宗》,“卜筮最后的判断是非理性转义,其他一切都只是形式”,“明人的著作,从京氏易出,如今天几日…

Kubernetes Prometheus 系列|Prometheus介绍和使用|Prometheus+Grafana集成

目录 第1章Prometheus 入门1.1 Prometheus 的特点1.1.1 易于管理1.1.2 监控服务的内部运行状态1.1.3 强大的数据模型1.1.4 强大的查询语言 PromQL1.1.5 高效1.1.6 可扩展1.1.7 易于集成1.1.8 可视化1.1.9 开放性 1.2 Prometheus 的架构1.2.1 Prometheus 生态圈组件1.2.2 架构理…

【C++ 】stack 和 queue

1. 标准库中的stack stack 的介绍&#xff1a; 1. stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行 元素的插入与提取操作 2. stack是作为容器适配器被实现的&#xff0c;容器适配器即是对特定类封装作为其…

PyQt4应用程序的PDF查看器

最近因为项目需要创建一个基于PyQt4的PDF查看器应用程序&#xff0c;正常来说&#xff0c;我们可以使用PyQt4的QtWebKit模块来显示PDF文件。那么具体怎么实现呢 &#xff1f;以下就是我写的一个简单的示例代码&#xff0c;演示如何创建一个PyQt4应用程序的PDF查看器&#xff1a…

如何在CentOS7搭建DashDot服务器仪表盘并实现远程监控

文章目录 1. 本地环境检查1.1 安装docker1.2 下载Dashdot镜像 2. 部署DashDot应用3. 本地访问DashDot服务4. 安装cpolar内网穿透5. 固定DashDot公网地址 本篇文章我们将使用Docker在本地部署DashDot服务器仪表盘&#xff0c;并且结合cpolar内网穿透工具可以实现公网实时监测服务…

解决iview表格固定列横向滚动条无法拖动问题

问题描述&#xff1a; iview的table添加固定列以后&#xff0c;滚动条在固定列下面无法拖动&#xff0c;只能在滚动区域有所反应 解决办法 【写入main.js引入的全局文件时不需要::v-deep; 写入单个文件需要加::v-deep】 方法一&#xff1a;【带合计行也适用】 //解决iview表…

java数据结构与算法刷题-----LeetCode47. 全排列 II

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 暴力回溯2. 分区法回溯 此题为46题的衍生题&#xff0c;在46题…

力扣热题100_矩阵_48_旋转图像

文章目录 题目链接解题思路解题代码 题目链接 48.旋转图像 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 示例 1&#xff1…

国外visa卡怎么办理,可充ChatGPTPLUS、Claude、Midjourney

很多小伙都在使用ChatGPT&#xff0c;但是想充值ChatGPTPLUS缺需要国外的visa卡&#xff0c;拿自己的银联卡&#xff0c;尝试了好多次还是不行&#xff0c;其实用一张国外的visa卡几分钟就可以升级好 办理国外visa卡&#xff0c;点击获取 国外的visa卡&#xff0c;具体要看你…

批量PDF转HTML:高效管理与优化文档格式

随着数字化时代的快速发展&#xff0c;PDF文件因其跨平台兼容性和良好的排版效果而被广泛应用。然而&#xff0c;在文本批量管理的场景中&#xff0c;我们可能需要将PDF文件转换为HTML格式&#xff0c;以便更好地进行编辑、搜索和定制。本文将为您介绍一种高效的方法&#xff0…

【算法与数据结构】深入解析二叉树(一)

文章目录 &#x1f4dd;数概念及结构&#x1f320; 树的概念&#x1f309;树的表示&#x1f320; 树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; &#x1f309;二叉树概念及结构&#x1f320;概念&#x1f309;数据结构中的二叉树&#x1f320;特殊的二叉…

CVPR2023 | 3D Data Augmentation for Driving Scenes on Camera

3D Data Augmentation for Driving Scenes on Camera 摄像机驾驶场景的 3D 数据增强 摘要翻译 驾驶场景极其多样和复杂&#xff0c;仅靠人力不可能收集到所有情况。虽然数据扩增是丰富训练数据的有效技术&#xff0c;但自动驾驶应用中现有的摄像头数据扩增方法仅限于二维图像…

数字化经济的前沿:深入了解 Web3 的商业模式

随着区块链技术的迅速发展&#xff0c;Web3作为一种新型的互联网范式&#xff0c;正逐渐引起人们的关注。它不仅仅是一种技术革新&#xff0c;更是一种商业模式和价值观的转变。本文将深入探讨Web3的商业模式&#xff0c;以及它对数字化经济的影响。 1. 理解Web3的商业模式 We…

Java实现知乎热点小时榜爬虫

1.效果演示 1.1 热点问题列表 启动程序后&#xff0c;自动展示热点问题&#xff0c;并等待终端输入 1.2 根据序号选择想看的热点问题 输入问题序号&#xff0c;展示回答内容 1.3 退出 输入q即可退出程序 2.源码 2.1 pom.xml <?xml version"1.0" enco…

第一次vp蓝桥杯

最失败的一集&#xff0c;这是学了个什么&#xff1f; 果然是一个很失败的人呢&#xff0c;第一次逃晚自习就被辅导员发现了呢&#xff0c;还给我打电话&#xff0c;虽然知道可能他也没办法。但这就更体现我很失败了。 题也不会写&#xff0c;其他的方面也不是很如意。嘻嘻嘻…

4、设计模式之建造者模式(Builder)

一、什么是建造者模式 建造者模式是一种创建型设计模式&#xff0c;也叫生成器模式。 定义&#xff1a;封装一个复杂对象构造过程&#xff0c;并允许按步骤构造。 解释&#xff1a;就是将复杂对象的创建过程拆分成多个简单对象的创建过程&#xff0c;并将这些简单对象组合起来…

【MySQL】深入解析索引实现原理

文章目录 1、索引介绍2、索引分类2.1、数据结构HashB Tree 2.2、存储方式聚簇索引非聚簇索引 2.3、功能特性主键索引唯一索引普通索引 2.4、字段数量单列索引多列索引 3、最佳实践3.1、索引覆盖3.2、回表操作3.3、最左匹配原则3.4、索引下推 1、索引介绍 对于MySQL数据库来说…