/** * 支持编写自定义的js代码定制组件行为，支持使用context对象获取组件上下文。 * 注意：使用该功能，需要具备一定html+js基础，代码编写不当可能会导致页面无法正常显示。 * 文本组件支持api: * - onMount: 在组件初始化完毕后执行 * - onUnmount: 在组件从dom中卸载前执行 **/ /* * context: * - dataSource：组件渲染源数据 * - id：组件唯一id * - parentKey：组件父级唯一id * - isEditor：代码执行环境是否在编辑器中 * - isPreview：代码执行环境是否在预览中 **/ function () { // ========== 商品数据（7个，每个都有独立图片链接） ========== const categories = [ { img: 'https://waimao.office.163.com/material/api/pub/resource/download?nodeId=757281622147031065' }, { img: 'https://waimao.office.163.com/material/api/pub/resource/download?nodeId=757281494820540493' }, { img: 'https://waimao.office.163.com/material/api/pub/resource/download?nodeId=757281482552193032' }, { img: 'https://waimao.office.163.com/material/api/pub/resource/download?nodeId=757281482598338658' }, { img: 'https://waimao.office.163.com/material/api/pub/resource/download?nodeId=757281482350874697' }, { img: 'https://waimao.office.163.com/material/api/pub/resource/download?nodeId=757281488650715194' }, { img: 'https://waimao.office.163.com/material/api/pub/resource/download?nodeId=757281599862689854' }, ]; // Swiper CDN 地址（若平台屏蔽外链，请替换为上传到资源库的本地路径） const swiperCssUrl = 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css'; const swiperJsUrl = 'https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js'; let swiperInstance = null; let styleEl = null; let scriptEl = null; // ---------- 工具函数：动态加载 CSS ---------- function loadCss(url) { return new Promise((resolve, reject) => { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = url; link.onload = () => resolve(); link.onerror = () => reject(new Error('CSS 加载失败: ' + url)); document.head.appendChild(link); styleEl = link; }); } // ---------- 工具函数：动态加载 JS ---------- function loadScript(url) { return new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = url; script.onload = () => resolve(); script.onerror = () => reject(new Error('JS 加载失败: ' + url)); document.head.appendChild(script); scriptEl = script; }); } // ---------- 构建轮播 HTML（传入 context 避免作用域错误） ---------- function buildSwiperHtml(context) { const slidesHtml = categories.map((cat, index) => { // 图片高度设为300px，保持比例，不显示名称 const imgHtml = ` 商品图片 ${index + 1}

`; return `

${imgHtml}

`; }).join(''); return `

Product Category

${slidesHtml}

`; } // ---------- 配置对象 ---------- const config = { onMount: async (context) => { console.log('[轮播组件] onMount 触发，组件 ID:', context.id); // 1. 获取组件根节点（尝试多种方式提高兼容性） let container = document.getElementById(context.id); if (!container) { // 部分平台可能使用 data-id 属性包裹 container = document.querySelector(`[data-component-id="${context.id}"]`); } if (!container) { console.error('[轮播组件] 找不到组件容器，请检查平台是否提供了正确的 DOM 挂载点'); return; } // 2. 插入 HTML const html = buildSwiperHtml(context); container.innerHTML = html; console.log('[轮播组件] HTML 已插入'); // 3. 编辑器环境不初始化 Swiper（仅显示静态内容） if (context.isEditor) { console.log('[轮播组件] 当前为编辑器模式，跳过 Swiper 初始化'); return; } // 4. 加载 Swiper 并初始化 try { if (!window.Swiper) { console.log('[轮播组件] 开始加载 Swiper 资源...'); await loadCss(swiperCssUrl); await loadScript(swiperJsUrl); console.log('[轮播组件] Swiper 资源加载完成'); } const swiperEl = container.querySelector('.swiper-container'); if (!swiperEl) { throw new Error('未找到 .swiper-container 元素'); } swiperInstance = new Swiper(swiperEl, { loop: true, autoplay: context.isPreview ? false : true, // 预览时不自动播放，发布后自动 speed: 800, slidesPerView: 6, spaceBetween: 40, breakpoints: { 1024: { slidesPerView: 3, spaceBetween: 30 }, 768: { slidesPerView: 2, spaceBetween: 40 } }, pagination: { el: '.swiper-pagination', clickable: true, dynamicBullets: true, }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }); console.log('[轮播组件] Swiper 初始化成功'); } catch (error) { console.error('[轮播组件] 初始化失败:', error); // 降级：静态展示所有卡片（无轮播效果） container.querySelector('.swiper-wrapper').style.display = 'flex'; container.querySelector('.swiper-wrapper').style.flexWrap = 'wrap'; container.querySelectorAll('.swiper-slide').forEach(slide => { slide.style.width = '22%'; slide.style.margin = '1%'; }); console.warn('[轮播组件] 已降级为静态网格展示'); } }, onUnmount: (context) => { console.log('[轮播组件] onUnmount 触发，清理资源'); if (swiperInstance) { swiperInstance.destroy(true, true); swiperInstance = null; } if (styleEl) { styleEl.remove(); styleEl = null; } if (scriptEl) { scriptEl.remove(); scriptEl = null; } }, }; return config; }

Sanfeng Jewelry Co., Ltd.

Your Trusted B2B Partner

Title2

IS9001

Social contribution

Social contribution

Social contribution