小程序学习3 goods-card

news2024/11/16 11:52:42

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"
    }
}

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

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

相关文章

【MIT 6.S081】2020, 实验记录（8），Lab: locks

【MIT 6.S081】2020, 实验记录（8），Lab: locks

目录 Task 1&#xff1a;Memory allocator (moderate)</font>Task 2&#xff1a;Buffer cache (hard)</font> Task 1&#xff1a;Memory allocator (moderate) 这个任务就是练习将一把大锁拆分为多个小锁&#xff0c;同时可以更加深入地理解 memory allocator 运行…
阅读更多...
PY32离线烧录器功能介绍，可批量烧录，支持PY32系列多款单片机

PY32离线烧录器功能介绍，可批量烧录，支持PY32系列多款单片机

PY32离线烧录器可以对PY系列单片机进行批量烧录&#xff0c;现支持PY32F002A/002B/002/003/030/071/072/040/403/303芯片各封装和XL2409&#xff0c;XL32F001/003等芯片。PY32离线烧录器需要搭配上位机软件才能使用&#xff0c;上位机软件在我们官网&#xff08;www.xinlinggo.…
阅读更多...
JVM基础篇

JVM基础篇

什么是JVM java虚拟机 JVM的功能 1.解释和运行 对字节码文件中的指令&#xff0c;实时的解释成机器码&#xff0c;让计算机执行 2.内存管理 自动为对象、方法等分配内存 自动的垃圾回收机制&#xff0c;回收不再使用的对象&#xff08;c不会自动回收&#xff0c;相当于降…
阅读更多...
QT 如何防止 QTextEdit 自动滚动到最下方

QT 如何防止 QTextEdit 自动滚动到最下方

在往QTextEdit里面append字符串时&#xff0c;如果超出其高度&#xff0c;默认会自动滚动到QTextEdit最下方。但是有些场景可能想从文本最开始的地方展示&#xff0c;那么就需要禁止自动滚动。 我们可以在append之后&#xff0c;添加如下代码&#xff1a; //设置编辑框的光标位…
阅读更多...
指针的函数传参的详细讲解（超详细）

指针的函数传参的详细讲解（超详细）

如果对指针基础知识已经有可以直接跳到 函数的指针传参与解引用&#xff0c;哪里不明白可以评论&#xff0c;随时解答。 目录 所以就有了一句话&#xff1a;指针就是地址&#xff0c;地址就是指针 对于指针在C语言中&#xff0c;指针类型就是数据类型&#xff0c;是给编译器…
阅读更多...
PHP极简网盘系统源码 轻量级文件管理与共享系统网站源码

PHP极简网盘系统源码 轻量级文件管理与共享系统网站源码

PHP极简网盘系统源码 轻量级文件管理与共享系统网站源码 极简网盘是一个轻量级文件管理与共享系统&#xff0c;支持多用户&#xff0c;可充当网盘程序&#xff0c;程序无需数据库 安装步骤&#xff1a; 1.建议安装在apache环境下&#xff0c;并确保.htaccess可用 2.解压文件…
阅读更多...
论文阅读——RingMo

论文阅读——RingMo

RingMo: A Remote Sensing Foundation Model With Masked Image Modeling 与自然场景相比&#xff0c;RS图像存在以下困难。 1&#xff09;分辨率和方位范围大&#xff1a;受遥感传感器的影响&#xff0c;图像具有多种空间分辨率。此外&#xff0c;与自然图像的实例通常由于重…
阅读更多...
【Python】Leetcode 240. 搜索二维矩阵 II - 削减矩阵+递归，击败88%

【Python】Leetcode 240. 搜索二维矩阵 II - 削减矩阵+递归，击败88%

描述 搜索二维矩阵 II 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。 该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。 每列的元素从上到下升序排列。 思路 确定左右及上下限&#xff0c;削减矩阵&#xff0c;递归。 注意判断四个端…
阅读更多...
15届蓝桥杯第一期模拟赛所有题目解析

15届蓝桥杯第一期模拟赛所有题目解析

文章目录 &#x1f9e1;&#x1f9e1;t1_字母数&#x1f9e1;&#x1f9e1;问题描述思路代码 &#x1f9e1;&#x1f9e1;t2_大乘积&#x1f9e1;&#x1f9e1;问题描述思路代码 &#x1f9e1;&#x1f9e1;t3_星期几&#x1f9e1;&#x1f9e1;问题描述思路代码 &#x1f9e1;…
阅读更多...
Spring基础——使用注解开发SpringMVC

Spring基础——使用注解开发SpringMVC

目录 配置SpringMVC的初始化信息配置ServletWebApplicationContext配置RootWebApplicationContext配置ServletContext 创建Controller控制器配置Controller响应路径接收用户传递参数接收JSON数据接收简单类型对象封装参数 接收数组类型 Restful 文章源码仓库&#xff1a;Spring…
阅读更多...
大模型笔记：吴恩达 ChatGPT Prompt Engineering for Developers（1） prompt的基本原则和策略

大模型笔记：吴恩达 ChatGPT Prompt Engineering for Developers（1） prompt的基本原则和策略

1 intro 基础大模型 VS 用指令tune 过的大模型 基础大模型 只会对prompt的文本进行续写 所以当你向模型发问的时候&#xff0c;它往往会像复读机一样续写几个问题这是因为在它见过的语料库文本&#xff08;通常大多来自互联网&#xff09;中&#xff0c;通常会连续列举出N个问…
阅读更多...
Flask vs. Django：选择适合你的Web开发框架【第134篇—Flask vs. Django】

Flask vs. Django：选择适合你的Web开发框架【第134篇—Flask vs. Django】

Flask vs. Django&#xff1a;选择适合你的Web开发框架 在选择一个适合你项目的Web开发框架时&#xff0c;常常会遇到 Flask 和 Django 这两个流行的选择。两者都有其优势和适用场景&#xff0c;本文将探讨它们的特点&#xff0c;并通过代码实例和解析来帮助你更好地做出选择。…
阅读更多...
环形链表的起点——细节讲解

环形链表的起点——细节讲解

对于一个环形链表&#xff0c;我们要找到他的起点。可以通过如下推导。 我们设置两个快慢指针&#xff0c;相遇的点为X. 到起点的距离是T&#xff0c;圈长是C&#xff0c;第一次相交的点是X &#xff08;TX&#xff09;2TNCX 化出来TN*C-X 也就是说我们把一个节点放头部重新遍…
阅读更多...
SQLiteC/C++接口详细介绍之sqlite3类（六）

SQLiteC/C++接口详细介绍之sqlite3类（六）

快速前往文章列表&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;五&#xff09; 下一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;七&#xff09; 19. sqlite3_changes与sqlite3_changes64 是SQLite中用…
阅读更多...
手机安装Kali Linux

手机安装Kali Linux

在数字化时代&#xff0c;信息安全和隐私保护显得尤为重要。Kali Linux&#xff0c;作为一款专业的渗透测试和安全审计工具&#xff0c;因其强大的功能和丰富的资源库而受到广大安全研究者和爱好者的青睐。然而&#xff0c;我们通常只能在传统的电脑设备上安装和使用Kali Linux…
阅读更多...
外卖小程序-购物车模块表结构设计和后端代码

外卖小程序-购物车模块表结构设计和后端代码

表结构设计 添加购物车代码 Service public class ShoppingCartServiceImpl implements ShoppingCartService {Autowiredprivate ShoppingCartMapper shoppingCartMapper;Autowiredprivate DishMapper dishMapper;Autowiredprivate SetmealMapper setmealMapper;/*** 添加购物…
阅读更多...
在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;…
阅读更多...
某夕夕商品数据抓取逆向之webpack扣取

某夕夕商品数据抓取逆向之webpack扣取

逆向网址 aHR0cHM6Ly93d3cucGluZHVvZHVvLmNvbQ 逆向链接 aHR0cHM6Ly93d3cucGluZHVvZHVvLmNvbS9ob21lL2JveXNoaXJ0 逆向接口 aHR0cHM6Ly9hcGl2Mi5waW5kdW9kdW8uY29tL2FwaS9naW5kZXgvdGYvcXVlcnlfdGZfZ29vZHNfaW5mbw 逆向过程 请求方式&#xff1a;GET 参数构成 【anti_content】…
阅读更多...
PHP中的反序列化漏洞

PHP中的反序列化漏洞

PHP中的反序列化漏洞 目录 PHP 中的序列化与反序列化 概述 序列化 基本类型的序列化 对象的序列化 反序列化 示例序列化与反序列化 反序列化漏洞 - PHP 中的魔术方法 - Typecho_v1.0 中的反序列化漏洞 POP链的构造思路 pop链案例 反序列化逃逸 字符串逃逸&#xff…
阅读更多...
GoLang：云原生时代致力于构建高性能服务器的后端语言

GoLang：云原生时代致力于构建高性能服务器的后端语言

Go语言的介绍 概念 Golang&#xff08;也被称为Go&#xff09;是一种编程语言&#xff0c;由Google于2007年开始设计和开发&#xff0c;并于2009年首次公开发布。Golang是一种静态类型、编译型的语言&#xff0c;旨在提供高效和可靠的软件开发体验。它具有简洁的语法、高效的编…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023