小程序学习3 goods-card

pages/home/home

        home.wxml

  <goods-list
    wr-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-card
		  id="{{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

<view
  id="{{independentID}}"
  class="goods-card"
  bind:tap="clickHandle"
  data-goods="{{ goods }}"
>
	<view class="goods-card__main">
		<view class="goods-card__thumb" bind:tap="clickThumbHandle">
			<t-image
			  wx: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">
					<view
					  wx: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">
				<price
				  wx:if="{{ goods.price }}"
				  wr-class="spec-for-price"
				  symbol-class="spec-for-symbol"
				  symbol="{{currency}}"
				  price="{{goods.price}}"
				/>
				<price
				  wx:if="{{ goods.originPrice && isValidityLinePrice }}"
				  wr-class="goods-card__origin-price"
				  symbol="{{currency}}"
				  price="{{goods.originPrice}}"
				  type="delthrough"
				/>
				<t-icon
				  class="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"
    }
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

深度学习模型部署(八)TensorRT完整推理流程

深度学习模型部署(八)TensorRT完整推理流程

TensorRT的大致流程&#xff1a; 图片来自TensorRT的官方教程 构建期 模型解析计算图优化节点消除多精度支持优选kernel&#xff1a;选择最适合当下设备的实现导入plugin&#xff1a;实现自定义操作显存优化&#xff1a;显存池复用 运行期 运行时环境&#xff1a;对象生命周…
阅读更多...
CVPR2024 | 改善多模态大模型底层视觉能力，NTU与商汤联合提出Q-Instruct，已开源

CVPR2024 | 改善多模态大模型底层视觉能力，NTU与商汤联合提出Q-Instruct，已开源

https://arxiv.org/pdf/2311.06783.pdf https://github.com/Q-Future/Q-Instruct 以 GPT-4V 为代表的多模态大语言模型&#xff08;MLLM&#xff09;为视觉感知和理解任务引入了范式转变&#xff0c;即可以在一个基础模型中实现多种能力。虽然当前的 MLLM 表现出了从低级视觉属…
阅读更多...
移动距离 刷题笔记

移动距离 刷题笔记

依题意 给出两个数 n,m 两个数的坐标分标为 x1,y1 ; x2,y2; 所求最短距离即曼哈顿距离 d|x2-x1||y2-y1|; 当我们想求两个数的行号时 按正常数组的求法 &#xff08;n/w) 如果从1 开始 每一行的最后一个元素除于w的结果都比宽度1; 所以我们从1开始 于是 每一行的…
阅读更多...
Java开发从入门到精通（七）：Java的面向对象编程OOP：语法、原理、this、构造器

Java开发从入门到精通（七）：Java的面向对象编程OOP：语法、原理、this、构造器

Java大数据开发和安全开发 &#xff08;一&#xff09;Java的面向对象编程1.1 什么是面向对象1.2 面向对象和面向过程的区别1.3 面向对象开发设计特征1.4 面向对象语法1.4.1 先创建对象模板1.4.2 实例化对象1.4.3 对象又该怎么理解?1.4.4 对象在计算机中的执行原理 1.5 类和对…
阅读更多...
Palworld幻兽帕鲁管理员操作手册

Palworld幻兽帕鲁管理员操作手册

Palworld幻兽帕鲁管理员操作手册 大家好我是艾西&#xff0c;在我们搭建完幻兽帕鲁服务器后肯定会涉及到后期的维护比如&#xff1a;角色修改&#xff0c;帕鲁修改&#xff0c;异常删除&#xff0c;公会修改&#xff0c;清理玩家&#xff0c;清理建筑&#xff0c;存档迁移等数…
阅读更多...
寄存器（内存访问）

寄存器（内存访问）

文章目录 寄存器&#xff08;内存访问&#xff09;1 内存中字的存储2 DS和[address]3 字的传送4 mov、add、sub指令5 数据段6 栈7 CPU提供的栈机制8 栈顶超界的问题9 push、pop指令10 栈段 寄存器&#xff08;内存访问&#xff09; 1 内存中字的存储 CPU中&#xff0c;用16位寄…
阅读更多...
域内令牌窃取

域内令牌窃取

前言 有这样一种场景&#xff0c;拿到了一台主机权限&#xff0c;是本地管理员&#xff0c;同时在这台主机上登录的是域管成员&#xff0c;这时我们可以通过dump lsass或通过 Kerberos TGT &#xff0c;但是这是非常容易被edr命中的。 本文就通过令牌窃取进行研究&#xff0c…
阅读更多...
MySQL 篇-深入了解事务四大特性及原理

MySQL 篇-深入了解事务四大特性及原理

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 事务的概述 2.0 事务的特性 2.1 原子性 2.2 一致性 2.3 持久性 2.4 隔离性 2.4.1 脏读问题 2.4.2 不可重复读问题 2.4.3 幻读问题 3.0 事务的四个隔离级别 3.1…
阅读更多...
Apache DolphinScheduler-3.2.0集群部署教程

Apache DolphinScheduler-3.2.0集群部署教程

集群部署方案(2 Master 3 Worker) Apache DolphinScheduler官网&#xff1a;https://dolphinscheduler.apache.org/zh-cnApache DolphinScheduler使用文档&#xff1a;https://dolphinscheduler.apache.org/zh-cn/docs/3.2.0截止2024-01-19&#xff0c;最新版本&#xff1a;3…
阅读更多...
【学一点儿前端】vue3+vite不能使用require引入包的问题（require is not defined）

【学一点儿前端】vue3+vite不能使用require引入包的问题（require is not defined）

问题 今天本来想简单敲个码&#xff0c;结果遇到一个报错&#xff1a;require is not defined 原因 查了各方资料&#xff0c;原因如下&#xff1a; 前端有很多的工具包是commonjs的写法&#xff0c;只能用require引入&#xff0c;而vitevue3构建的项目不能使用require&…
阅读更多...
Gemma: Open Models Based on Gemini Research and Technology

Gemma: Open Models Based on Gemini Research and Technology

Gemma: Open Models Based on Gemini Research and Technology 相关链接&#xff1a;arxiv 关键字&#xff1a;Gemma、Google DeepMind、open models、language understanding、reasoning 摘要 这项工作介绍了Gemma&#xff0c;一系列轻量级、最先进的开放模型&#xff0c;基于…
阅读更多...
C++中的STL-string类

C++中的STL-string类

文章目录 一、为什么学习string类&#xff1f;1.1 C语言中的字符串 二、准库中的string类2.2 string类2.3 string类的常用接口说明2.4 string类对象的容量操作2.5 string类对象的访问及遍历操作2.5 string类对象的修改操作2.7 string类非成员函数2.8 模拟实现string 一、为什么…
阅读更多...
Python环境搭建 -- Python与PyCharm安装

Python环境搭建 -- Python与PyCharm安装

一、Python安装 我们先找到Python的官方网站&#xff0c;在浏览器中搜索Python即可&#xff0c;然后进入Python官网 点击Downloads&#xff0c;选择对应匹配的操作系统 点进去之后&#xff0c;Python的版本分为稳定的版本和前置版本&#xff0c;前置的版本就是还没有发行的版本…
阅读更多...
接口自动化测试思路和实战 —— 编写线性测试脚本实战！

接口自动化测试思路和实战 —— 编写线性测试脚本实战！

接口自动化测试框架目的 测试工程师应用自动化测试框架的目的: 增强测试脚本的可维护性、易用性(降低公司自动化培训成本&#xff0c;让公司的测试工程师都可以开展自动化测试)。 自动化测试框架根据思想理念和深度不同&#xff0c;渐进式的分为以下几种: 线性脚本框架 模块…
阅读更多...
室内定位在数字化中的应用

室内定位在数字化中的应用

随着数字化经济的迅速发展&#xff0c;室内定位技术正逐渐成为一个不可或缺的重要组成部分。它不仅能够提升用户体验&#xff0c;还能够帮助企业实现更精准的市场定位和营销策略。本文将探讨室内定位在数字化经济中的应用及其带来的优势。 首先&#xff0c;室内定位技术在商业…
阅读更多...
原生php单元测试示例

原生php单元测试示例

下载phpunit.phar https://phpunit.de/getting-started/phpunit-9.html 官网 然后win点击这里下载 新建目录 这里目录可以作为参考&#xff0c;然后放在根目录下 新建一个示例类 <?phpdeclare(strict_types1);namespace Hjj\DesignPatterns\Creational\Hello;class He…
阅读更多...
Python3虚拟环境之pipenv

Python3虚拟环境之pipenv

pipenv是python官方推荐的包管理工具&#xff0c;集成了virtualenv, pip和pyenv三者的功能。集合了所有的包管理工具的长处&#xff0c;自动为项目创建和管理虚拟环境。 安装 pip install pipenv在Pycharm中使用 修改Pipfile的安装源参数url&#xff0c;改为https://pypi.tun…
阅读更多...
基于Python的中医药知识问答系统设计与实现

基于Python的中医药知识问答系统设计与实现

[简介] 这篇文章主要介绍了基于Python的中医药知识问答系统的设计与实现。该系统利用Python编程语言&#xff0c;结合中医药领域的知识和技术&#xff0c;实现了一个功能强大的问答系统。文章首先介绍了中医药知识的特点和传统问答系统的局限性&#xff0c;然后提出了设计思路…
阅读更多...
如何在Windows系统部署Plex影音站点并实现公网访问内网媒体库

如何在Windows系统部署Plex影音站点并实现公网访问内网媒体库

文章目录 1.前言2. Plex网站搭建2.1 Plex下载和安装2.2 Plex网页测试2.3 cpolar的安装和注册 3. 本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 1.前言 用手机或者平板电脑看视频&#xff0c;已经算是生活中稀松平常的场景了&#xff0c;特别是各…
阅读更多...
《鸟哥的Linux私房菜》第6章——总结与习题参考答案

《鸟哥的Linux私房菜》第6章——总结与习题参考答案

目录 一、 简介 二、一些新了解的指令 1.touch- 修改文件时间或创建新文件 2.umask-新建文件/目录的默认权限 3.文件隐藏属性 4.文件特殊权限 5.file-观察文件类型 三、简答题部分 一、 简介 本章介绍了一些常用的文件与目录指令&#xff0c;包括新建/删除/复制/移动/查…
阅读更多...
最新文章

Copyright @ 2022~2023