• 小程序学习3 goods-card

    pages/home/home

            home.wxml

    1.   <goods-list
    2.     wr-class="goods-list-container"
    3.     goodsList="{{goodsList}}"
    4.     bind:click="goodListClickHandle"
    5.     bind:addcart="goodListAddCartHandle"
    6.   />

    是一个自定义组件，它具有以下属性和事件：

    属性：

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

    事件：

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

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

            home.json

    1. "usingComponents": {
    2.     "goods-list": "/components/goods-list/index",
    3. }

            home.js

    1. import { fetchHome } from '../../services/home/home';
    2. import { fetchGoodsList } from '../../services/good/fetchGoods';
    3. import Toast from 'tdesign-miniprogram/toast/index';
    4.  
    5. Page({
    6.   data: {
    7.     imgSrcs: [],
    8.     tabList: [],
    9.     goodsList: [],
    10.     goodsListLoadStatus: 0,
    11.     pageLoading: false,
    12.     current: 1,
    13.     autoplay: true,
    14.     duration: '500',
    15.     interval: 5000,
    16.     navigation: { type: 'dots' },
    17.     swiperImageProps: { mode: 'scaleToFill' },
    18.   },
    19.  
    20.   goodListPagination: {
    21.     index: 0,
    22.     num: 10,
    23.   },
    24.  
    25.   privateData: {
    26.     tabIndex: 0,
    27.   },
    28.  
    29.   onShow() {
    30.     this.getTabBar().init();
    31.   },
    32.  
    33.   onLoad() {
    34.     this.init();
    35.   },
    36.  
    37.   onReachBottom() {
    38.     if (this.data.goodsListLoadStatus === 0) {
    39.       this.loadGoodsList();
    40.     }
    41.   },
    42.  
    43.   onPullDownRefresh() {
    44.     this.init();
    45.   },
    46.  
    47.   init() {
    48.     this.loadHomePage();
    49.   },
    50.  
    51.   loadHomePage() {
    52.     wx.stopPullDownRefresh();
    53.  
    54.     this.setData({
    55.       pageLoading: true,
    56.     });
    57.     fetchHome().then(({ swiper, tabList }) => {
    58.       this.setData({
    59.         tabList,
    60.         imgSrcs: swiper,
    61.         pageLoading: false,
    62.       });
    63.       this.loadGoodsList(true);
    64.     });
    65.   },
    66.  
    67.   tabChangeHandle(e) {
    68.     this.privateData.tabIndex = e.detail;
    69.     this.loadGoodsList(true);
    70.   },
    71.  
    72.   onReTry() {
    73.     this.loadGoodsList();
    74.   },
    75.  
    76.   async loadGoodsList(fresh = false) {
    77.     if (fresh) {
    78.       wx.pageScrollTo({
    79.         scrollTop: 0,
    80.       });
    81.     }
    82.  
    83.     this.setData({ goodsListLoadStatus: 1 });
    84.  
    85.     const pageSize = this.goodListPagination.num;
    86.     let pageIndex = this.privateData.tabIndex * pageSize + this.goodListPagination.index + 1;
    87.     if (fresh) {
    88.       pageIndex = 0;
    89.     }
    90.  
    91.     try {
    92.       const nextList = await fetchGoodsList(pageIndex, pageSize);
    93.       this.setData({
    94.         goodsList: fresh ? nextList : this.data.goodsList.concat(nextList),
    95.         goodsListLoadStatus: 0,
    96.       });
    97.  
    98.       this.goodListPagination.index = pageIndex;
    99.       this.goodListPagination.num = pageSize;
    100.     } catch (err) {
    101.       this.setData({ goodsListLoadStatus: 3 });
    102.     }
    103.   },
    104.  
    105.   goodListClickHandle(e) {
    106.     const { index } = e.detail;
    107.     const { spuId } = this.data.goodsList[index];
    108.     wx.navigateTo({
    109.       url: `/pages/goods/details/index?spuId=${spuId}`,
    110.     });
    111.   },
    112.  
    113.   goodListAddCartHandle() {
    114.     Toast({
    115.       context: this,
    116.       selector: '#t-toast',
    117.       message: '点击加入购物车',
    118.     });
    119.   },
    120.  
    121.   navToSearchPage() {
    122.     wx.navigateTo({ url: '/pages/goods/search/index' });
    123.   },
    124.  
    125.   navToActivityDetail({ detail }) {
    126.     const { index: promotionID = 0 } = detail || {};
    127.     wx.navigateTo({
    128.       url: `/pages/promotion-detail/index?promotion_id=${promotionID}`,
    129.     });
    130.   },
    131. });
     解析：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() {  }
    1.  goodListAddCartHandle() {
    2.     Toast({
    3.       context: this,
    4.       selector: '#t-toast',
    5.       message: '点击加入购物车',
    6.     });
    7.   },

    TDesign    Toast 轻提示

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

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

    在函数中，Toast组件的参数包括：

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

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

    components/goods-list

            index.wxml

    1. <view class="goods-list-wrap wr-class" id="{{independentID}}">
    2. 	<block wx:for="{{goodsList}}" wx:for-item="item" wx:key="index">
    3. 		<goods-card
    4. 		  id="{{independentID}}-gd-{{index}}"
    5. 		  data="{{item}}"
    6. 		  currency="{{item.currency || '¥'}}"
    7. 		  thresholds="{{thresholds}}"
    8. 		  class="goods-card-inside"
    9. 		  data-index="{{index}}"
    10. 		  bind:thumb="onClickGoodsThumb"
    11. 		  bind:click="onClickGoods"
    12. 		  bind:add-cart="onAddCart"
    13. 		/>
    14. 	block>
    15. view>

            index.json

    1. {
    2.     "component": true,
    3.     "usingComponents": {
    4.         "goods-card": "/components/goods-card/index"
    5.     }
    6. }

    components/goods-card

            index.wxml

    1. <view
    2.   id="{{independentID}}"
    3.   class="goods-card"
    4.   bind:tap="clickHandle"
    5.   data-goods="{{ goods }}"
    6. >
    7. 	<view class="goods-card__main">
    8. 		<view class="goods-card__thumb" bind:tap="clickThumbHandle">
    9. 			<t-image
    10. 			  wx:if="{{ !!goods.thumb }}"
    11. 			  t-class="goods-card__img"
    12. 			  src="{{ goods.thumb }}"
    13. 			  mode="aspectFill"
    14. 			  lazy-load
    15. 			/>
    16. 		view>
    17. 		<view class="goods-card__body">
    18. 			<view class="goods-card__upper">
    19. 				<view wx:if="{{ goods.title }}" class="goods-card__title">
    20. 					{{ goods.title }}
    21. 				view>
    22. 				<view wx:if="{{ goods.tags && !!goods.tags.length }}" class="goods-card__tags">
    23. 					<view
    24. 					  wx:for="{{ goods.tags }}"
    25. 					  wx:key="index"
    26. 					  wx:for-item="tag"
    27. 					  class="goods-card__tag"
    28. 					  data-index="{{index}}"
    29. 					>
    30. 						{{tag}}
    31. 					view>
    32. 				view>
    33. 			view>
    34. 			<view class="goods-card__down">
    35. 				<price
    36. 				  wx:if="{{ goods.price }}"
    37. 				  wr-class="spec-for-price"
    38. 				  symbol-class="spec-for-symbol"
    39. 				  symbol="{{currency}}"
    40. 				  price="{{goods.price}}"
    41. 				/>
    42. 				<price
    43. 				  wx:if="{{ goods.originPrice && isValidityLinePrice }}"
    44. 				  wr-class="goods-card__origin-price"
    45. 				  symbol="{{currency}}"
    46. 				  price="{{goods.originPrice}}"
    47. 				  type="delthrough"
    48. 				/>
    49. 				<t-icon
    50. 				  class="goods-card__add-cart"
    51. 				  prefix="wr"
    52. 				  name="cartAdd"
    53. 				  id="{{independentID}}-cart"
    54. 				  data-id="{{independentID}}"
    55. 				  catchtap="addCartHandle"
    56. 				  size="48rpx"
    57. 				  color="#FA550F"
    58. 				/>
    59. 			view>
    60. 		view>
    61. 	view>
    62. view>
    63.
      

    TDesign  mode为   裁切

    lazy-load

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

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

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

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

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

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

           index.json

    1. {
    2.     "component": true,
    3.     "usingComponents": {
    4.         "price": "/components/price/index",
    5.         "t-icon": "tdesign-miniprogram/icon/icon",
    6.         "t-image": "/components/webp-image/index"
    7.     }
    8. }

  • 相关阅读:
    浅谈移动 GIS (内附主要特征和用途)
    数字人解决方案——ER-NeRF实时对话数字人模型训练与项目部署
    羧甲基荧光素6-FAM修饰聚缩醛Polyacetal/HA透明质酸纳米载体6-FAM-Polyacetal|6-FAM-HA（齐岳）
    新浪微博案例
    k8s分布式图床（k8s，metricsapi，vue3+ts）
    C语言详解系列——函数的认识（5）函数递归与迭代
    GraphQL（8）：与数据库结合示例
    通过此文让你全面了解Thread线程的基本操作
    详解如何保证消息队列不丢失消息（以kafka为例）
    初始化固定长度的数组
  • 原文地址：https://blog.csdn.net/xinzhengLUCK/article/details/136712142