TDesign电商小程序模板解析02-首页功能

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: TDesign电商小程序模板解析02-首页功能



上一篇我们搭建了底部的导航条,这一篇来拆解一下首页的功能。首页有如下功能

  • 可以进行搜索
  • 显示轮播图
  • 横向可拖动的页签
  • 图文卡片列表

1 home.json

因为是要使用组件库的组件搭建页面,自然是先需要引入自定义组件

{
  "navigationBarTitleText": "首页",
  "onReachBottomDistance": 10,
  "backgroundTextStyle": "light",
  "enablePullDownRefresh": true,
  "usingComponents": {
    "t-search": "tdesign-miniprogram/search/search",
    "t-loading": "tdesign-miniprogram/loading/loading",
    "t-swiper": "tdesign-miniprogram/swiper/swiper",
    "t-swiper-nav": "tdesign-miniprogram/swiper-nav/swiper-nav",
    "t-image": "/components/webp-image/index",
    "t-icon": "tdesign-miniprogram/icon/icon",
    "t-toast": "tdesign-miniprogram/toast/toast",
    "t-tabs": "tdesign-miniprogram/tabs/tabs",
    "t-tab-panel": "tdesign-miniprogram/tab-panel/tab-panel",
    "goods-list": "/components/goods-list/index",
    "load-more": "/components/load-more/index"
  }
}

引入的组件还是不少的,贴入配置后发现控制台报错,因为这里既使用到了TDesign中的组件,也使用到了自定义组件,我们需要将报错的组件,自己搭建一下。

其实解决问题就像俄罗斯套娃一样,拿走一个里边还有一个,直到你拿到最后一个才可以

2 goods-list组件

选中components文件夹,右键新建一个文件夹

输入goods-list,然后在goods-list文件夹上右键,点击新建Page

然后输入index,自动生成四个文件,index.wxml、index.wxss、index.json、index.js

自定义组件也是包含四个文件,要依次看模板的代码

index.json

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

这里goods-list又继续引用了goods-card组件

index.js

Component({
  externalClasses: ['wr-class'],
  properties: {
    goodsList: {
      type: Array,
      value: [],
    },
    id: {
      type: String,
      value: '',
      observer: (id) => {
        this.genIndependentID(id);
      },
    },
    thresholds: {
      type: Array,
      value: [],
    },
  },
  data: {
    independentID: '',
  },
  lifetimes: {
    ready() {
      this.init();
    },
  },
  methods: {
    onClickGoods(e) {
      const { index } = e.currentTarget.dataset;
      this.triggerEvent('click', { ...e.detail, index });
    },
    onAddCart(e) {
      const { index } = e.currentTarget.dataset;
      this.triggerEvent('addcart', { ...e.detail, index });
    },
    onClickGoodsThumb(e) {
      const { index } = e.currentTarget.dataset;
      this.triggerEvent('thumb', { ...e.detail, index });
    },
    init() {
      this.genIndependentID(this.id || '');
    },
    genIndependentID(id) {
      if (id) {
        this.setData({ independentID: id });
      } else {
        this.setData({
          independentID: `goods-list-${~~(Math.random() * 10 ** 8)}`,
        });
      }
    },
  },
});

自定义组件的externalClasses表示外部样式类,可以在引用的时候传入样式来改变组件的样式。properties表示组件对外暴露的属性,可以根据组件的需要进行设置。method表示组件可以响应的事件,看目前的设置事件是和电商业务相关的,具体是什么含义,我们在调用的时候再分析

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>

这是组件的内容部分,他又使用了一个goods-card组件

index.wxss

.goods-list-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0;
  background: #fff;
}

样式部分还是很简单的,他是设置了一个流式布局,元素是按行排列,要求自动换行,水平对齐是两端对齐,没有内边距并设置了一定的背景色

3 goods-card组件

在components文件夹下再新建一个goods-card文件夹

然后在goods-card文件夹新建一个Page

index.json

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

好家伙真还是俄罗斯套娃,这个组件又套了两个组件,需要继续新建

index.js

Component({
  options: {
    addGlobalClass: true,
  },
  properties: {
    id: {
      type: String,
      value: '',
      observer(id) {
        this.genIndependentID(id);
        if (this.properties.thresholds?.length) {
          this.createIntersectionObserverHandle();
        }
      },
    },
    data: {
      type: Object,
      observer(data) {
        if (!data) {
          return;
        }
        let isValidityLinePrice = true;
        if (data.originPrice && data.price && data.originPrice < data.price) {
          isValidityLinePrice = false;
        }
        this.setData({ goods: data, isValidityLinePrice });
      },
    },
    currency: {
      type: String,
      value: '¥',
    },
    thresholds: {
      type: Array,
      value: [],
      observer(thresholds) {
        if (thresholds && thresholds.length) {
          this.createIntersectionObserverHandle();
        } else {
          this.clearIntersectionObserverHandle();
        }
      },
    },
  },
  data: {
    independentID: '',
    goods: { id: '' },
    isValidityLinePrice: false,
  },
  lifetimes: {
    ready() {
      this.init();
    },
    detached() {
      this.clear();
    },
  },
  pageLifeTimes: {},
  methods: {
    clickHandle() {
      this.triggerEvent('click', { goods: this.data.goods });
    },
    clickThumbHandle() {
      this.triggerEvent('thumb', { goods: this.data.goods });
    },
    addCartHandle(e) {
      const { id } = e.currentTarget;
      const { id: cardID } = e.currentTarget.dataset;
      this.triggerEvent('add-cart', {
        ...e.detail,
        id,
        cardID,
        goods: this.data.goods,
      });
    },
    genIndependentID(id) {
      let independentID;
      if (id) {
        independentID = id;
      } else {
        independentID = `goods-card-${~~(Math.random() * 10 ** 8)}`;
      }
      this.setData({ independentID });
    },
    init() {
      const { thresholds, id } = this.properties;
      this.genIndependentID(id);
      if (thresholds && thresholds.length) {
        this.createIntersectionObserverHandle();
      }
    },
    clear() {
      this.clearIntersectionObserverHandle();
    },
    intersectionObserverContext: null,
    createIntersectionObserverHandle() {
      if (this.intersectionObserverContext || !this.data.independentID) {
        return;
      }
      this.intersectionObserverContext = this.createIntersectionObserver({
        thresholds: this.properties.thresholds,
      }).relativeToViewport();
      this.intersectionObserverContext.observe(
        `#${this.data.independentID}`,
        (res) => {
          this.intersectionObserverCB(res);
        },
      );
    },
    intersectionObserverCB() {
      this.triggerEvent('ob', {
        goods: this.data.goods,
        context: this.intersectionObserverContext,
      });
    },
    clearIntersectionObserverHandle() {
      if (this.intersectionObserverContext) {
        try {
          this.intersectionObserverContext.disconnect();
        } catch (e) {}
        this.intersectionObserverContext = null;
      }
    },
  },
});

这个组件里边的代码会更复杂一点

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>

index.wxss

.goods-card {
  box-sizing: border-box;
  font-size: 24rpx;
  border-radius: 0 0 16rpx 16rpx;
  border-bottom: none;
}
.goods-card__main {
  position: relative;
  display: flex;
  line-height: 1;
  padding: 0;
  background: transparent;
  width: 342rpx;
  border-radius: 0 0 16rpx 16rpx;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  flex-direction: column;
}
.goods-card__thumb {
  flex-shrink: 0;
  position: relative;
  width: 340rpx;
  height: 340rpx;
}
.goods-card__thumb:empty {
  display: none;
  margin: 0;
}
.goods-card__img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16rpx 16rpx 0 0;
  overflow: hidden;
}
.goods-card__body {
  display: flex;
  flex: 1 1 auto;
  background: #fff;
  border-radius: 0 0 16rpx 16rpx;
  padding: 16rpx 24rpx 18rpx;
  flex-direction: column;
}
.goods-card__upper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1 1 auto;
}
.goods-card__title {
  flex-shrink: 0;
  font-size: 28rpx;
  color: #333;
  font-weight: 400;
  display: -webkit-box;
  height: 72rpx;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  line-height: 36rpx;
}
.goods-card__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 8rpx 0 0 0;
}
.goods-card__tag {
  color: #fa4126;
  background: transparent;
  font-size: 20rpx;
  border: 1rpx solid #fa4126;
  padding: 0 8rpx;
  border-radius: 16rpx;
  line-height: 30rpx;
  margin: 0 8rpx 8rpx 0;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
}
.goods-card__down {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: flex-start;
  align-items: baseline;
  line-height: 32rpx;
  margin: 8rpx 0 0 0;
}
.goods-card__origin-price {
  white-space: nowrap;
  font-weight: 700;
  order: 2;
  color: #bbbbbb;
  font-size: 24rpx;
  margin: 0 0 0 8rpx;
}
.goods-card__add-cart {
  order: 3;
  margin: auto 0 0 auto;
  position: absolute;
  bottom: 0;
  right: 0;
}
.spec-for-price {
  font-size: 36rpx;
  white-space: nowrap;
  font-weight: 700;
  order: 1;
  color: #fa4126;
  margin: 0;
}
.spec-for-symbol {
  font-size: 24rpx;
}

总结

看首页功能,其实看wxml文件并不复杂,复杂在了既调用了组件库中的组件,又自己封装了很多组件,而且是俄罗斯套娃,一层嵌套一层,这么个看要想用熟练一套模板也不是简单的事情。

目录
打赏
0
0
0
0
15
分享
相关文章
微信小程序与Java后端实现微信授权登录功能
微信小程序极大地简化了登录注册流程。对于用户而言,仅仅需要点击授权按钮,便能够完成登录操作,无需经历繁琐的注册步骤以及输入账号密码等一系列复杂操作,这种便捷的登录方式极大地提升了用户的使用体验
267 12
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
45 0
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
116 8
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
微信小程序多语言切换神器:简繁体切换功能完全指南
随着全球化的发展,支持多种语言的应用程序愈发重要。本文介绍了如何在微信小程序中实现简体与繁体字体之间的切换功能,以满足不同地区用户的需求。通过创建utils文件夹并编写相应的转换函数,开发者可以方便地实现语言切换,从而提升用户体验。文章中还附带了示例代码和效果图,帮助读者更好地理解和应用这一功能。
189 0
微信小程序多语言切换神器:简繁体切换功能完全指南
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
查找首字母与Python相关的的英文词汇小程序的续篇---进一步功能完善
48 1
|
5月前
|
java--微信小程序发送模板消息
java--微信小程序发送模板消息
197 0
【C++】模板进阶:深入解析模板特化
【C++】模板进阶:深入解析模板特化
191 0
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
93 0
在线课堂+工具组件小程序uniapp移动端源码
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
635 3

热门文章

最新文章

推荐镜像

更多