"商品列表"组件:<goods> —— 快应用组件库H-UI

最新推荐文章于 2021-06-17 22:07:22 发布
最新推荐文章于 2021-06-17 22:07:22 发布
阅读量564 收藏
点赞数
分类专栏： 高频场景
Copyright 2020 h-ui.mobi
本文链接：https://blog.csdn.net/weixin_41324043/article/details/105639288
版权

-w538
001

-w537

<import name="goods" src="../Common/ui/h-ui/scene/c_goods"></import>
<template>
    <div class="container">
        <goods data="{{data1}}"></goods>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data1:{
                title: '时尚好物 新人专区',
                subTitle: '全场满38元包邮',
                extra: '新人专享',
                uri: '/About',
                mode: 1,
                list:[{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/shishang1.jpg',
                    title: '时尚女装',
                    extra: '白领最爱',
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/shishang2.jpg',
                    title: '时尚女装',
                    extra: '活力无限',
                    uri: '/About'
                }]
            }
        }
    }
</script>

-w537

<import name="goods" src="../Common/ui/h-ui/scene/c_goods"></import>
<template>
    <div class="container">
        <goods data="{{data2}}"></goods>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data2:{
                title: '最in频道',
                subTitle: '每日精选 人气爆款',
                extra: '更多',
                uri: '/About',
                mode: 2,
                list:[{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/jiaju1.jpg',
                    title: '智能冲刷',
                    extra: '正品保证',
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/jiaju2.jpg',
                    title: '简约套装',
                    extra: '一种生活品味',
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/jiaju3.jpg',
                    title: '壁挂组合',
                    extra: '国民卫浴选择',
                    uri: '/About'
                }]
            }
        }
    }
</script>

-w537

<import name="goods" src="../Common/ui/h-ui/scene/c_goods"></import>
<template>
    <div class="container">
        <goods data="{{data3}}"></goods>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data3:{
                title: '最高折上8折 再满199减100',
                subTitle: '仅限前两小时 立即抢购',
                extra: '3.15春季总动员',
                uri: '/About',
                mode: 3,
                list:[{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/qianggou1.jpg',
                    title: '天堂伞',
                    extra: '两用伞专场',
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/qianggou2.jpg',
                    title: '时光沙漏',
                    extra: '厂家清仓',
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/qianggou3.jpg',
                    title: '太阳伞',
                    extra: '丽人出行',
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/qianggou4.jpg',
                    title: '仿真花艺',
                    extra: '家居精品',
                    uri: '/About'
                }]
            }
        }
    }
</script>

-w536
-w538

<import name="goods" src="../Common/ui/h-ui/scene/c_goods"></import>
<template>
    <div class="container">
        <goods data="{{data4}}"></goods>
        <goods data="{{data4_2}}"></goods>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data4:{
                title: '全球热卖',
                extra: '更多',
                uri: '/About',
                mode: 4,
                list:[{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/remai1.jpg',
                    title: '苏州丝绸睡衣四件套',
                    price: 896,
                    marketPrice: 1180,
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/remai2.jpg',
                    title: '邻家小妹俏皮居家睡衣',
                    price: 158,
                    uri: '/About'
                }]
            },
            data4_2:{
                title: '全球热卖',
                extra: '更多',
                uri: '/About',
                mode: 4,
                outline: true,
                list:[{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/remai1.jpg',
                    title: '苏州丝绸睡衣四件套',
                    price: 896,
                    marketPrice: 1180,
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/remai2.jpg',
                    title: '邻家小妹俏皮居家睡衣',
                    price: 158,
                    uri: '/About'
                }]
            }
        }
    }
</script>

-w535

<import name="goods" src="../Common/ui/h-ui/scene/c_goods"></import>
<template>
    <div class="container">
        <goods data="{{data5}}"></goods>
        <goods data="{{data5_2}}"></goods>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data5:{
                showTitle: false,
                mode: 5,
                list:[{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/canju1.jpg',
                    title: '单身贵族泡面碗',
                    price: 0,
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/canju2.jpg',
                    title: '景德镇中式骨瓷餐具套装',
                    price: 788,
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/canju3.jpg',
                    title: '欧洲宫廷风餐具',
                    price: 599,
                    uri: '/About'
                }]
            },
            data5_2:{
                showTitle: false,
                mode: 5,
                outline: true,
                list:[{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/canju1.jpg',
                    title: '单身贵族泡面碗',
                    price: 0,
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/canju2.jpg',
                    title: '景德镇中式骨瓷餐具套装',
                    price: 788,
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/canju3.jpg',
                    title: '欧洲宫廷风餐具',
                    price: 599,
                    uri: '/About'
                }]
            }
        }
    }
</script>

-w537

<import name="goods" src="../Common/ui/h-ui/scene/c_goods"></import>
<template>
    <div class="container">
        <goods data="{{data6}}"></goods>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data6:{
                title: '大牌精选',
                extra: '更多',
                uri: '/About',
                mode: 6,
                list:[{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/cover1.jpg',
                    title: '迪奥魅惑唇膏 全球限量',
                    price: 1598,
                    uri: '/About'
                }]
            }
        }
    }
</script>

-w537

<import name="goods" src="../Common/ui/h-ui/scene/c_goods"></import>
<template>
    <div class="container">
        <goods data="{{data7}}"></goods>
        <goods data="{{data7_2}}"></goods>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data7:{
                showTitle: false,
                mode: 7,
                list:[{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/bao1.jpg',
                    title: 'Gucci英伦风便携包',
                    price: 1969,
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/bao2.jpg',
                    title: 'COACH头层牛皮手提包',
                    price: 1388,
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/bao3.jpg',
                    title: 'COACH迷你单肩包',
                    price: 2198,
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/bao4.jpg',
                    title: '拼色单肩PU皮包',
                    price: 588,
                    uri: '/About'
                }]
            },
            data7_2:{
                showTitle: false,
                mode: 7,
                outline: true,
                list:[{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/bao1.jpg',
                    title: 'Gucci英伦风便携包',
                    price: 1969,
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/bao2.jpg',
                    title: 'COACH头层牛皮手提包',
                    price: 1388,
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/bao3.jpg',
                    title: 'COACH迷你单肩包',
                    price: 2198,
                    uri: '/About'
                },{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/bao4.jpg',
                    title: '拼色单肩PU皮包',
                    price: 588,
                    uri: '/About'
                }]
            }
        }
    }
</script>

-w538

<import name="goods" src="../Common/ui/h-ui/scene/c_goods"></import>
<template>
    <div class="container">
        <goods data="{{data8}}"></goods>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data8:{
                title: '新特卖 每天早10晚8上新',
                extra: '更多',
                uri: '/About',
                mode: 8,
                list:[{
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/cover2.jpg',
                    title: '新浪漫主义｜DenoiseNY',
                    uri: '/About'
                },
                {
                    pic: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/cover3.jpg',
                    title: '可负担的奢侈感｜Bluebella',
                    uri: '/About'
                }]
            }
        }
    }
</script>
扫码体验

-w257

快应用H-UI
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
tp5整合h-ui及部分功能实现
chadxia88_go的博客
05-24 996
1、下载tp5及h-ui TP5官方下载即可，h-ui下载谷歌一把，很多的 2、整合步骤 a、进入public/static新建admin目录，用于存入下载来的h-ui b、h-ui的使用例子不必放到项目里，自己慢慢看就行，如图需要的文件有 c、找到视图常量配置类，路径：\thinkphp\library\think\View.php，添加后台静态...
快应用： 样式
qq_36413371的博客
12-11 222
设置多组样式 &lt;div class="functionpage" style="{{styleObj }}" onclick="clickRight"> props: { title: { type: String, default: 'title' }, hasPaddingTop: { type: Boolean, default: true }, hasBottomLine: { t
html产品规格怎样计算价格,商品生成多规格 关于添加商品多规格生成表格的功能实现...
weixin_33695631的博客
06-17 316
var lv2HTML = '' +'' +'删除参数' +'';$(document).ready(function() {$('#add_lv1').on('click', function() {var last = $('.control-group.lv1:last');if (!last || last.length == 0) {$(this).parents('.control-g...
HUI 简单易用的前端UI
12-01
Hui也可在官网下载，这里提供一下便捷下载地址。仅供参考
Vue nodejs商城项目-商品列表页面组件
wyw223的博客
06-28 1408
Vue nodejs商城项目-商品列表页面组件 data(){        return {            goodsList:[], // 商品列表            priceFilter:[ // 价格区间数组                {                    startPrice:'0.00',     ...
react-chat-ui:React一个用于构建聊天UI的React组件库
04-30
:speak-no-evil_monkey: React聊天UI 用于构建聊天UI的React组件库。赞助由赞助： 特征自动滚动到底部超级好用多用户分组（在演示中试用） 请记住，该项目仍处于开发的早期阶段。 如果您遇到错误或有功能请求，请在...
react-native-ui-lib：React Native的UI组件库
02-01
用于React Native的UI工具集和组件库 查看我们的。 我们的 下载我们的Expo演示应用 （您将需要Expo App） 正在安装 请参阅安装说明。 新的主要版本5.0 查看 对于React Native> = 0.60.0 请使用react-native-ui-...
ivy-ui:符合Web Components规范的web组件库
04-02
常春藤符合Web Components规范的web组件库使用须知- 所有组件的使用方式都和原生方式一致（获取元素的属性...）- 自定义事件（非原生事件）都需要使用`addEventListener`来绑定使用说明npm或纱npm i ivy-uiyarn add ...
semantic-ui-calendar-react:Datepicker React组件基于语义UIReact组件
05-14
Datepicker React组件基于语义UIReact组件 我的意图是创建类似于。 在这里您可以找到一个实时示例 安装 npm npm i semantic-ui-calendar-react CDN &lt; script src =" ...
spck-ui:纯粹的JSJSON组件库中的简单性
05-13
Spck用户界面Spck UI是一个轻量级的（仅压缩了37.1kB），简单的声明式UI库，无需使用HTML，CSS来创建SPA（单页应用程序）。 Spck UI纯粹是MVC的View部分，并使用香草JavaScript， jQuery和流行的组件库UIkit进行工作...
小程序踩坑之旅
weixin_43704691的博客
03-28 355
bug[1] 商城购物车手动修改商品数量 1.需求展示 2.渲染代码结构 &lt;view class="pro_info clearfix {{goodsItem.goodsState == 30?'gray':''}}"> &lt;view class="pro_title" data-goodsid='{{goodsItem.goodsId}}' bindtap='t...
30组常用前端开发组件库，前端组件收集整理列表
Mr_rencp的博客
03-05 3118
0. 前端自动化 前端构建工具 gulp – The streaming build systemgrunt – the JavaScript Task Runner 前端模块管理器 Bower – A package manager for the webBrowserifyComponentDuoRequireJSSea.js css预处理器 Less
基于vue的tab-list类目切换商品列表组件
小分享
02-13 2288
在大多数电商场景中，页面都会有类目切换加上商品列表的部分，页面大概会长这样 每次写类似场景的时候，都需要去为类目商品列表写很多逻辑，为了提高开发效率我决定将这一部分抽离成组件。 实现 1.样式 所有tab栏的样式和商品列表的样式都提供插槽，供业务自己定制 2.变量 isTabFixed: false,//是否吸顶 tab: 1,//当前tab page: 1,//当前页数 l...
vue全栈商场项目-商品列表页面
王中博的博客
02-27 9203
.vue后缀的有组件，有页面，页面放在views文件夹，组件放在components文件夹；css文件导入：组件导入：实际上此处的&lt;nav-header&gt;可以匹配nav-header,navHeader,NavHeader;对此有疑惑，请看关于组件的命名；面包屑组件的slot：slot什么都不放：在nav-bread标签里加一个Goods：slot加name属性：传送门：官方文档讲解s...
GoodsList / GoodsListItem
sinat_36048532的博客
12-02 1170
gtr
vue中image 的:src 与 src
yyyyyysssssshhhhhh的博客
11-26 2852
src下可以直接方本地图片路径； :src 下放 base64格式 或者 放 require(本地图片路径）；
【C/C++】拷贝构造函数 赋值运算符的重载
shimadear的博客
08-03 1321
 1.拷贝构造函数 1.1拷贝构造函数基本形式 就类对象而言，相同类型的类对象是通过拷贝构造函数来在对象初始化期间完成整个复制过程的。 拷贝构造函数是一种特殊的构造函数，函数的名称必须和类名称一致，它的唯一的一个参数是本类型的一个引用变量，该参数是const类型，不可变的。例如：类T的拷贝构造函数的形式为T(const T&amp; t)。 当用一个已初始化过了的自定义类类型对象去初始化另...
前端面试题-url、href、src
weixin_33725270的博客
03-20 3482
一、URL的概念 统一资源定位符（或称统一资源定位器/定位地址、URL地址等，英语：Uniform Resource Locator，常缩写为URL），有时也被俗称为网页地址（网址）。如同在网络上的门牌，是因特网上标准的资源的地址（Address）。 二、URL的格式 2.1 标准格式 协议类型:[//服务器地址[:端口号]][/资源层级...
微信小程序之购物车
书写人生
05-22 9830
登录成功、付款成功，而且还拥有了自己的一辆车： 购物车 也发现了自己的不足之处： 余额不足。 为大家介绍的就是购物车 这里演示从商品列表中添加到购物车 下面先做商品列表页。如下图： 布局分析： 首先一个list的主盒子，接着是item盒子，这是必须的。       然后把item分成左侧的图片部分，和右侧的说
GtvAttestationHostTestCases Attestation test was not successful expected:&lt;1> but was:&lt;0>
最新发布
05-12
这个错误信息看起来是在进行某种测试时出现了错误，具体的原因可能需要查看测试代码和环境配置。一般来说，这个错误提示表明测试的期望值是1，但是实际测试结果是0，也就是测试没有通过。您可以尝试排查以下可能的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值