小程序学习3 goods-card

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。函数的作用是加载商品列表。

首先，如果fresh为true，则调用wx.pageScrollTo函数将页面滚动到顶部。

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

接下来，根据当前的页码和每页的数量计算出要请求的页码。如果fresh为true，则将页码设置为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.mzph.cn/news/745603.shtml

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

相关文章

[抽象]工厂模式（[Abstract] Factory）——创建型模式

[抽象]工厂模式（[Abstract] Factory）——创建型模式

[抽象]工厂模式——创建型模式 什么是抽象工厂&#xff1f; 抽象工厂模式是一种创建型设计模式&#xff0c;让你能够保证在客户端程序中创建一系列有依赖的对象组时&#xff0c;无需关心这些对象的类型。 具体来说&#xff1a; 对象的创建与使用分离&#xff1a; 抽象工厂模…
阅读更多...
信号与系统学习笔记——信号的分类

信号与系统学习笔记——信号的分类

目录 一、确定与随机 二、连续与离散 三、周期与非周期 判断是否为周期函数 离散信号的周期 结论 四、能量与功率 定义 结论 五、因果与反因果 六、阶跃函数 定义 性质 七、冲激函数 定义 重要关系 作用 一、确定与随机 确定信号&#xff1a;可以确定时间函数…
阅读更多...
uniapp移动端 IOS系统下无法与webview通信

uniapp移动端 IOS系统下无法与webview通信

不知道有没有人遇到过这个问题 我的页面嵌套了一个webview&#xff08;文件位于项目的hybrif/html&#xff09;目录下 使用evalJS与webview进行通信 代码如下 在安卓里运行是没问题的&#xff0c;但在苹果手机上一直无法通信 连接真机&#xff0c;打印evalJS是个方法&#xf…
阅读更多...
C语言中内存函数的使用

C语言中内存函数的使用

memcpy函数的使用和模拟实现 memcpy的使用 函数使用说明&#xff1a; • 函数memcpy从source的位置开始向后复制num个字节的数据到destination指向的内存位置。 • 这个函数在遇到 \0 的时候并不会停下来。 • 如果source和destination有任何的重叠&#xff0c;复制的结…
阅读更多...
【python】centos 8新装python3.10.0

【python】centos 8新装python3.10.0

1.python源码包准备 2.gcc环境安装 如果系统已具备&#xff0c;可以略过。 有的已经自带了gcc&#xff0c;但是如果编译时启动优化的话&#xff0c;如果gcc版本过老就必须要升级。 3.make环境安装 如果系统已具备&#xff0c;可以略过。 4.更新openssl版本&#xff08;很重…
阅读更多...
C# 根据两点名称，寻找两短路程的最优解，【有数据库设计，完整代码】

C# 根据两点名称，寻找两短路程的最优解，【有数据库设计，完整代码】

前言 如果我们遇到路径问题&#xff0c;可以使用点点连线&#xff0c;给定一个点&#xff0c;可以到达另外几个点&#xff0c;寻找最优解 例&#xff1a;如下图所示&#xff0c;如果要从A1-C1,可以有三条路 1.A1-B1-C1 2.A1-B2-C1 3.A1-B3-C1 最优解肯定是A1-B1-C1&#xff0c…
阅读更多...
Java代码审计安全篇-XXE(XML外部实体注入)漏洞

Java代码审计安全篇-XXE(XML外部实体注入)漏洞

前言&#xff1a; 堕落了三个月&#xff0c;现在因为被找实习而困扰&#xff0c;着实自己能力不足&#xff0c;从今天开始 每天沉淀一点点 &#xff0c;准备秋招 加油 注意&#xff1a; 本文章参考qax的网络安全java代码审计&#xff0c;记录自己的学习过程&#xff0c;还希望各…
阅读更多...
软考77-上午题-【面向对象技术3-设计模式】-创建型设计模式02

软考77-上午题-【面向对象技术3-设计模式】-创建型设计模式02

一、生成器模式 1-1、意图 将一个复杂对象的构建与它的表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 1-2、结构图 Builder 为创建一个 Product 对象的各个部件指定抽象接口。ConcreteBuilder 实现 Builder 的接口以构造和装配该产品的各个部件&#xff0c;定…
阅读更多...
css设置选中文字和选中图片字的颜色

css设置选中文字和选中图片字的颜色

要改变页面中选中文字的颜色&#xff0c;可以使用 CSS 的 ::selection 伪元素来实现 *::selection {/* 改变选中文字的背景色 */background-color: #c42121;/* 改变选中文字的文本颜色 */color: #fff; } 用通配符选择器给所有元素都加上了 ::selection伪元素&#xff0c;用于…
阅读更多...
GPT实战系列-如何让LangChain的Agent选择工具

GPT实战系列-如何让LangChain的Agent选择工具

GPT实战系列-如何让LangChain的Agent选择工具 LangChain GPT实战系列-LangChain如何构建基通义千问的多工具链 GPT实战系列-构建多参数的自定义LangChain工具 GPT实战系列-通过Basetool构建自定义LangChain工具方法 GPT实战系列-一种构建LangChain自定义Tool工具的简单方法…
阅读更多...
先验分布、后验分布、极大似然的一点思考

先验分布、后验分布、极大似然的一点思考

今天和组里同事聊天的时候&#xff0c;无意中提到了贝叶斯统计里先验分布、后验分布、以及极大似然估计这三个概念。同事专门研究如何利用条件概率做系统辨识的&#xff0c;给我画了一幅图印象非常深刻&#xff1a; 其中k表示时序关系。上面这个图表示后验分布是由先验分布与似…
阅读更多...
2024年云服务器ECS价格表出炉——阿里云

2024年云服务器ECS价格表出炉——阿里云

2024年阿里云服务器租用费用&#xff0c;云服务器ECS经济型e实例2核2G、3M固定带宽99元一年&#xff0c;轻量应用服务器2核2G3M带宽轻量服务器一年61元&#xff0c;ECS u1服务器2核4G5M固定带宽199元一年&#xff0c;2核4G4M带宽轻量服务器一年165元12个月&#xff0c;2核4G服务…
阅读更多...
深入理解TCP的四次分手过程

深入理解TCP的四次分手过程

文章目录 深入理解TCP的四次分手过程四次分手的意义四次分手的工作原理四次分手的重要性实际应用中的考虑结论补充:TIME_WAIT在哪一步?TIME_WAIT状态的目的TIME_WAIT状态的影响 深入理解TCP的四次分手过程 在网络通信中&#xff0c;TCP&#xff08;传输控制协议&#xff09;确…
阅读更多...
在Linux/Ubuntu/Debian中使用7z压缩和解压文件

在Linux/Ubuntu/Debian中使用7z压缩和解压文件

要在 Ubuntu 上使用 7-Zip 创建 7z 存档文件&#xff0c;你可以使用“7z”命令行工具。 操作方法如下&#xff1a; 安装 p7zip&#xff1a; 如果你尚未在 Ubuntu 系统上安装 p7zip&#xff08;7-Zip 的命令行版本&#xff09;&#xff0c;你可以使用以下命令安装它&#xff1a;…
阅读更多...
Gitlab光速发起Merge Request

Gitlab光速发起Merge Request

前言 在我们日常开发过程中需要经常使用到Merge Request&#xff0c;在使用过程中我们需要来回在开发工具和UI界面之前来回切换&#xff0c;十分麻烦。那有没有一种办法可以时间直接开发开工具中直接发起Merge Request呢&#xff1f; 答案是有的。 使用 Git 命令方式创建 Me…
阅读更多...
Unity资源热更新----AssetBundle

Unity资源热更新----AssetBundle

13.1 资源热更新——AssetBundle1-1_哔哩哔哩_bilibili Resources 性能消耗较大 Resources文件夹大小不能超过2个G 获取AssetBundle中的资源 打包流程 选择图片后点击 创建文件夹&#xff0c;Editor优先编译 打包文件夹位置 using UnityEditor; using UnityEngine; public cla…
阅读更多...
ideaSSM社区二手交易平台C2C模式开发mysql数据库web结构java编程计算机网页源码maven项目

ideaSSM社区二手交易平台C2C模式开发mysql数据库web结构java编程计算机网页源码maven项目

一、源码特点 idea ssm 社区二手交易平台系统是一套完善的完整信息管理系统&#xff0c;结合SSM框架完成本系统SpringMVC spring mybatis &#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码…
阅读更多...
django-comment-migrate 模型注释的使用

django-comment-migrate 模型注释的使用

django-comment-migrate 的使用 django-comment-migrate 是一个 Django 应用&#xff0c;用于将模型注释自动迁移到数据库表注释中。它可以帮助您保持数据库表注释与模型定义的一致性&#xff0c;并提高代码的可读性。 安装 要使用 django-comment-migrate&#xff0c;您需要…
阅读更多...
bootstrap企业网站前端模板

bootstrap企业网站前端模板

介绍 企业网站前端模板 软件架构 前端所用技术html/css/js/jquery 前端框架bootstrap 安装教程 浏览器本地路径访问发布到服务器比如&#xff08;tomcat/nginx等&#xff09;云服务器/虚拟机 网站效果图 网站预览 点击预览 源码地址 https://gitee.com/taisan/company…
阅读更多...
react native常用插件

react native常用插件

react-native-async-storage/async-storage 说明&#xff1a;AsyncStorage 是一个在 react-native 中轻量存储的库&#xff1b;跟 localStorage 类似&#xff0c;API 也几乎一样&#xff1b;存储的时候需要将存储内容转成字符串存储。 react-navigation/material-bottom-tabs …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023