用易语言实现类似商品列表界面布局方法，求易语言代码

hehuaqiang001 · 发表于 2025-2-6 17:54:01

用易语言实现类似商品列表界面布局方案，求易语言代码：左侧商品图片，右侧文字型说明简介，图片与说明简介相对应。
每添加新商品自动向下排列，设置滚动条，方便浏览。
类似京东或Tao宝手机版商品陈列应用。

别理我烦着呢 · 发表于 2025-2-20 23:21:14

等待高手指点

hehuaqiang001 · 发表于 2025-2-10 10:49:03

dnxl 发表于 2025-2-9 23:23
说了这是网页源码，不管什么语言只要有浏览器控件就可以显示，把上面源码保存为.html文件，可以放服务器 ...

浏览器控件是指精易web浏览器或超级文本框，webview吗

hehuaqiang001 · 发表于 2025-2-10 10:41:39

dnxl 发表于 2025-2-9 23:23
说了这是网页源码，不管什么语言只要有浏览器控件就可以显示，把上面源码保存为.html文件，可以放服务器 ...

你好，能把这个软件的源码传上来吗。估计就这样了，后面应该没人补充了。要易语言源码

hehuaqiang001 · 发表于 2025-2-9 23:41:58

dnxl 发表于 2025-2-9 23:23
说了这是网页源码，不管什么语言只要有浏览器控件就可以显示，把上面源码保存为.html文件，可以放服务器 ...

JS是很方便，但还没学到，暂时又没时间搞，实在不行，到时就用复制组件命令自己搞了。

dnxl · 发表于 2025-2-9 23:23:16

hehuaqiang001 发表于 2025-2-9 22:10
是这种效果，有易语言写的吗？需要易语言的。

说了这是网页源码，不管什么语言只要有浏览器控件就可以显示，把上面源码保存为.html文件，可以放服务器上，也可以放本地硬盘上，也可以以文本方式加载进浏览器控件里。
但是想灵活修改显示信息，要会用JS跟浏览器控件互交，或者在网站后台......
比如我把那个源码保存为HTML文件，软件界面上放个浏览器控件，连接HTML文件就是下面效果。

hehuaqiang001 · 发表于 2025-2-9 22:10:29

dnxl 发表于 2025-2-8 20:18
AI写的代码
商品陈列
[mw_shl_code=html,true]

是这种效果，有易语言写的吗？需要易语言的。

dnxl · 发表于 2025-2-8 20:18:29

AI写的代码
商品陈列

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品陈列</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .product-list {
            padding: 10px;
            max-width: 600px;
            margin: 0 auto;
        }
        .product-item {
            display: flex;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 15px; /* 增加行间距 */
            overflow: hidden;
            height: 150px; /* 增加每一行的高度 */
        }
        .product-image {
            flex: 1; /* 占50%宽度 */
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px; /* 增加内边距 */
        }
        .product-image img {
            max-width: 100%;
            max-height: 100%;
            border-radius: 8px;
        }
        .product-content {
            flex: 1; /* 占50%宽度 */
            padding: 15px; /* 增加内边距 */
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .product-title {
            font-size: 1.2em; /* 增大字体 */
            font-weight: bold;
            margin-bottom: 8px; /* 增加标题和描述的间距 */
        }
        .product-description {
            font-size: 1em; /* 增大字体 */
            color: #666;
            margin-bottom: 12px; /* 增加描述和价格的间距 */
        }
        .product-price {
            font-size: 1.1em; /* 增大字体 */
            color: #e74c3c;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="product-list" id="productList">
        <!-- 商品项将通过 JavaScript 动态添加 -->
    </div>

    <script>
        // 商品数据
        const products = [
            {
                image: "https://via.placeholder.com/300",
                title: "商品1",
                description: "这是商品1的描述，详细介绍商品的特点和用途。",
                price: "￥99.99"
            },
            {
                image: "https://via.placeholder.com/300",
                title: "商品2",
                description: "这是商品2的描述，详细介绍商品的特点和用途。",
                price: "￥199.99"
            },
            {
                image: "https://via.placeholder.com/300",
                title: "商品3",
                description: "这是商品3的描述，详细介绍商品的特点和用途。",
                price: "￥299.99"
            },
            {
                image: "https://via.placeholder.com/300",
                title: "商品4",
                description: "这是商品4的描述，详细介绍商品的特点和用途。",
                price: "￥399.99"
            }
        ];

        // 获取商品列表容器
        const productList = document.getElementById("productList");

        // 动态添加商品
        products.forEach(product => {
            const productItem = document.createElement("div");
            productItem.className = "product-item";

            // 商品图片
            const productImage = document.createElement("div");
            productImage.className = "product-image";
            const img = document.createElement("img");
            img.src = product.image;
            img.alt = product.title;
            productImage.appendChild(img);

            // 商品内容
            const productContent = document.createElement("div");
            productContent.className = "product-content";
            const title = document.createElement("div");
            title.className = "product-title";
            title.textContent = product.title;
            const description = document.createElement("div");
            description.className = "product-description";
            description.textContent = product.description;
            const price = document.createElement("div");
            price.className = "product-price";
            price.textContent = product.price;

            productContent.appendChild(title);
            productContent.appendChild(description);
            productContent.appendChild(price);

            // 将图片和内容添加到商品项
            productItem.appendChild(productImage);
            productItem.appendChild(productContent);

            // 将商品项添加到商品列表
            productList.appendChild(productItem);
        });
    </script>
</body>
</html>

hehuaqiang001 · 发表于 2025-2-8 07:48:19

dnxl 发表于 2025-2-7 22:06
这种都是H5写的，不管什么语言拉个浏览器控件加载指定网页就可以显示。
谁没事闲的去自绘这东西 ...

https://yr7ywq.smartapps.baidu.c ... ne=3711000610001000

hehuaqiang001 · 发表于 2025-2-8 06:58:07

还是靠自己了。https://125.confly.eu.org/thread-14646146-1-1.html

dnxl · 发表于 2025-2-7 22:06:04

这种都是H5写的，不管什么语言拉个浏览器控件加载指定网页就可以显示。
谁没事闲的去自绘这东西

		自动登录	找回密码
密码			注册

[易语言] 用易语言实现类似商品列表界面布局方法，求易语言代码