HarmonyOS开发从0到1：购物页面之商品分类页面

Stella981
• 阅读 753

目录：

JS业务逻辑

视图渲染层

css属性设置

项目效果视频

本文是上篇文章的接续,继续完成商品购物页面的构建.话不多说,直接切入正题,.今天的小项目没有新的知识点介绍,算是对之前所学的知识做一个小总结.除了需要耐心的大量搜集图片素材,其他的完成的都比较顺利.温馨提示:对于干饭人来说,看文章时,管好口水是最主要的哈!!!    深夜发贴,我应该是最懂你的博主了哈哈哈

js业务逻辑:

export default {
    data: {
        currentIndex:0,
        title: 'World',
        specilties:[
            {"cname":"年货买不停","cimg":"common/shudaxia.jpg","price":"50"},
            {"cname":"张飞牛肉","cimg":"common/niurou.jpg","price":"50"},
            {"cname":"兔头","cimg":"common/tuzi.jpg","price":"50"},
            {"cname":"鸭货","cimg":"common/yazi.jpg","price":"50"},
            {"cname":"老腊肉香肠","cimg":"common/larou.jpg","price":"50"},
            {"cname":"蜀绣","cimg":"common/shuxiu.jpg","price":"50"},
            {"cname":"五粮液","cimg":"common/jiu.jpg","price":"50"},
            {"cname":"泸州老窖","cimg":"common/luzhou.jpg","price":"50"},
            {"cname":"竹叶青","cimg":"common/emeishan.jpg","price":"50"},
            {"cname":"火锅料","cimg":"common/shudaxia.jpg","price":"50"},


        ],
        first:[  {"cname":"郫县豆瓣酱","cimg":"common/pixain.jpg","price":"50"},
                 {"cname":"桥头火锅底料","cimg":"common/qaiotou.jpg","price":"50"},
                 {"cname":"张飞牛肉","cimg":"common/niurou1.jpg","price":"50"},
                 {"cname":"剑南春","cimg":"common/jiannanchun1.jpg","price":"50"},
                 {"cname":"老腊肉香肠","cimg":"common/larou.jpg","price":"50"},
                 {"cname":"蜀绣","cimg":"common/shuxiu.jpg","price":"50"},
                 {"cname":"五粮液","cimg":"common/jiu.jpg","price":"50"},
                 {"cname":"泸州老窖","cimg":"common/luzhou.jpg","price":"50"},
             ],
        second:[ {"cname":"什锦牛肉","cimg":"common/zhang3.jpg","price":"50"},
                 {"cname":"麻辣风干牛肉干","cimg":"common/zhang1.jpg","price":"50"},
                 {"cname":"五香原味","cimg":"common/niurou1.jpg","price":"50"},
                 {"cname":"灯影牛肉丝","cimg":"common/zhang2.jpg","price":"50"},
                 {"cname":"组合四件套酱牛肉","cimg":"common/zhang4.jpg","price":"50"},
                 {"cname":"川辣香酥","cimg":"common/zhang5.jpg","price":"50"},
                ],
        third:[{"cname":"双流老妈兔头","cimg":"common/tu3.jpg","price":"50","lname":[{"fname":"川香麻辣","icon":"common/zhang3.jpg","icon1":"common/add.png"},{"fname":"五香原味","icon":"common/zhang3.jpg","icon1":"common/add.png"},{"fname":"微微辣","icon":"common/zhang3.jpg","icon1":"common/add.png"}]},
               {"cname":"廖记棒棒鸡","cimg":"common/tu2.jpg","price":"50","lname":[{"fname":"川香麻辣","icon":"common/zhang3.jpg","icon1":"common/add.png"},{"fname":"五香原味","icon":"common/zhang3.jpg","icon1":"common/add.png"},{"fname":"微微辣","icon":"common/zhang3.jpg","icon1":"common/add.png"}]},
               {"cname":"自贡冷吃兔","cimg":"common/tu4.jpg","price":"50","lname":[{"fname":"川香麻辣","icon":"common/zhang3.jpg","icon1":"common/add.png"},{"fname":"五香原味","icon":"common/zhang3.jpg","icon1":"common/add.png"},{"fname":"微微辣","icon":"common/zhang3.jpg","icon1":"common/add.png"}]},
               {"cname":"肖三婆兔头","cimg":"common/tu6.jpg","price":"50","lname":[{"fname":"川香麻辣","icon":"common/zhang3.jpg","icon1":"common/add.png"},{"fname":"五香原味","icon":"common/zhang3.jpg","icon1":"common/add.png"},{"fname":"微微辣","icon":"common/zhang3.jpg","icon1":"common/add.png"}]},

              ],
        forth:[{"cname":"南充杨鸭子","cimg":"common/ya1.jpg","price":"50"},
               {"cname":"肖三婆板鸭","cimg":"common/ya2.jpg","price":"50"},
               {"cname":"乐山甜皮鸭","cimg":"common/ya3.jpg","price":"50"},
               {"cname":"彭州九尺鸭","cimg":"common/ya4.jpg","price":"50"},
               {"cname":"乐山赵鸭子","cimg":"common/ya5.jpg","price":"50"},
              ],
        seventh:[{"cname":"五粮浓香","cimg":"common/wu1.jpg","price":"50"},
                 {"cname":"万事如意","cimg":"common/wu11.jpg","price":"50"},
                 {"cname":"五粮国宾","cimg":"common/wu14.jpg","price":"50"},
                 {"cname":"永不分梨","cimg":"common/wu12.jpg","price":"50"},
                 {"cname":"仙林生态","cimg":"common/wu13.jpg","price":"50"}
                ],
        eleventh:[{"cname":"大龙燚","cimg":"common/dalong.jpg","lname":[{"fname":"麻辣牛油","icon":"common/huo9.jpg","icon1":"common/add.png"},{"fname":"菌汤番茄","icon":"common/huo10.jpg","icon1":"common/add.png"},{"fname":"自热锅香油干碟","icon":"common/huo11.jpg","icon1":"common/add.png"}]},
                  {"cname":"小龙坎","cimg":"common/xiaolong.jpg","lname":[{"fname":"麻辣牛油","icon":"common/huo5.jpg","icon1":"common/add.png"},{"fname":"菌汤番茄","icon":"common/huo6.jpg","icon1":"common/add.png"},{"fname":"自热锅香油干碟","icon":"common/huo7.jpg","icon1":"common/add.png"}]},
                  {"cname":"蜀大侠","cimg":"common/shuda.jpg","lname":[{"fname":"麻辣牛油","icon":"common/huo1.jpg","icon1":"common/add.png"},{"fname":"菌汤番茄","icon":"common/huo2.jpg","icon1":"common/add.png"},{"fname":"调味香油干碟","icon":"common/huo3.jpg","icon1":"common/add.png"}]},
                  {"cname":"川西坝子","cimg":"common/chuanxi.jpg","lname":[{"fname":"麻辣牛油","icon":"common/huo14.jpg","icon1":"common/add.png"},{"fname":"菌汤番茄","icon":"common/huo15.jpg","icon1":"common/add.png"},{"fname":"调味香油干碟","icon":"common/huo16.jpg","icon1":"common/add.png"}]}
                 ],
        changeview(index){
            this.$element("swiperview").swipeTo({index:index});
            this.currentIndex=index;
        },
        changeswiper(e){
            this.currentIndex=e.index;
        },
        changemenu(){

        }
    }
}

视图渲染层:

<div class="container">
    <list class="leftview">
        <block for="{{specilties}}">
         <list-item class="{{currentIndex==$idx?'listitem1':'listitem'}}" onclick="changeview({{$idx}})">
                 <text class="txt1">{{$item.cname}}</text>
         </list-item>
        </block>
    </list>
    <div class="rightview">
        <swiper id="swiperview" vertical="true" index="0" indicator="false" onchange="changeswiper">
            <!--年货买不断start-->
            <div class="box one">
                 <list class="list1">
                     <block for="{{first}}">
                         <list-item class="listitem2">
                             <image class="img1" src="{{$item.cimg}}"></image>
                             <div class="txt3">
                                 <text class="tex1">{{$item.cname}}</text>
                                 <div class="txt4">
                                     <image class="img4" src="common/RMB.png"></image>
                                     <text class="txt2">{{$item.price}}</text>
                                 </div>
                             </div>
                             <image class="img2" src="common/add.png" ></image>
                         </list-item>
                     </block>
                   
                 </list>
            </div>
            <!---年货买不断end-->
            <!---张飞牛肉start-->
            <div class="box two">
                <list class="list1">
                    <block for="{{second}}">
                        <list-item class="listitem2">
                            <image class="img1" src="{{$item.cimg}}"></image>
                            <div class="txt3">
                                <text class="tex1">{{$item.cname}}</text>
                                <div class="txt4">
                                    <image class="img4" src="common/RMB.png"></image>
                                    <text class="txt2">{{$item.price}}</text>
                                </div>
                            </div>
                            <image class="img2" src="common/add.png" ></image>
                        </list-item>
                    </block>
                </list>
            </div>
            <!---张飞牛肉end-->
            <!---兔子start-->
            <div class="box three">
                <list class="list2">
                    <block for="{{third}}">
                        <list-item-group class="group">
                            <list-item class="listitem3">
                                <image class="img5" src="{{$item.cimg}}"></image>
                            </list-item>
                            <block for="{{(cindex,cvalue) in $item.lname}}">
                                <list-item class="listitem4">
                                    <image class="img6" src="{{cvalue.icon}}"></image>
                                    <text class="txt6">{{cvalue.fname}}</text>
                                    <image class="img7" src="{{cvalue.icon1}}"></image>
                                </list-item>
                            </block>
                        </list-item-group>
                    </block>
                </list>
            </div>
            <!---兔子end-->
            <!---鸭子start-->
            <div class="box four">
                <list class="list1">
                    <block for="{{forth}}">
                        <list-item class="listitem2">
                            <image class="img1" src="{{$item.cimg}}"></image>
                            <div class="txt3">
                                <text class="tex1">{{$item.cname}}</text>
                                <div class="txt4">
                                    <image class="img4" src="common/RMB.png"></image>
                                    <text class="txt2">{{$item.price}}</text>
                                </div>
                            </div>
                            <image class="img2" src="common/add.png" ></image>
                        </list-item>
                    </block>
                </list>
            </div>
            <div class="box five">
        </div>
            <div class="box six">
        </div>
            <!--五粮液start-->
            <div class="wuliangye">
                <!--轮播start-->
                <swiper class="sswiper" autoplay="true" duration="3000" indicator="true" >
                    <div class="view1">
                       <image class="img8" src="common/wu6.jpg"></image>
                    </div>
                    <div class="view1">
                        <image class="img8" src="common/wu7.jpg"></image>
                    </div>
                    <div class="view1">
                        <image class="img8" src="common/wu8.jpg"></image>
                    </div>
                </swiper>
                <!--轮播end-->
                <list class="list7">
                    <block for="{{seventh}}">
                        <list-item class="listitem7">
                            <image class="img9" src="{{$item.cimg}}"></image>
                        </list-item>
                    </block>
                </list>
        </div>
             <!--五粮液end-->
             <!--泸州老窖start-->
            <div class="box eight">
                <div class="line1">
                    <image class="img10" src="common/lu1.jpg"></image>
                </div>
                <div class="line1">
                    <image class="img10" src="common/lu2.jpg"></image>
                </div>
                <div class="line1">
                    <image class="img10" src="common/lu3.jpg"></image>
                </div>
                <div class="line1">
                    <image class="img10" src="common/lu4.jpg"></image>
                </div>
                <div class="line1">
                    <image class="img10" src="common/lu5.jpg"></image>
                </div>
            </div>
            <!--泸州老窖end-->
            <div class="box nine">
        </div>
            <!--火锅start-->
            <div class="box ten">
                <list class="list2">
                    <block for="{{eleventh}}">
                        <list-item-group class="group">
                            <list-item class="listitem3">
                                <image class="img10" src="{{$item.cimg}}"></image>
                            </list-item>
                            <block for="{{(cindex,cvalue) in $item.lname}}">
                                <list-item class="listitem4">
                                    <image class="img6" src="{{cvalue.icon}}"></image>
                                    <text class="txt6">{{cvalue.fname}}</text>
                                    <image class="img7" src="{{cvalue.icon1}}"></image>
                                </list-item>
                            </block>
                        </list-item-group>
                    </block>
                </list>
        </div>
            <!--火锅end-->
        </swiper>
    </div>
</div>

css属性设置:

.container {
    left: 0px;
    top: 0px;
    width: 30%;
    height: 1200px;
    /**border-right: 1px solid  grey;**/
    /**background-color: skyblue;**/
}
.leftview{
    width: 100%;
    height: 100%;
}
.listitem{
    width: 100%;
    height: 20%;
    /**border-bottom:3px solid  grey;**/
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.listitem1{
    width: 100%;
    height: 20%;
    /**border-bottom:3px solid  grey;**/
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: orange;
}
.txt1{
    font-weight: bold;
    font-family: sans-serif;
    font-size: 40px;
}
.rightview{
    width: 70%;
    height: 100%;
    position: fixed;
    right: 0px;
    bottom: 0px;
}
.box{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.one{
    background-color: white;
}
.two{
    background-color: white;
}
.three{
    background-color: white;
}
.four{
    background-color: white;
}
.five{
    background-color: white;
}
.six{
    background-color: white;
}
.seven{
    background-color: white;
}
.eight{
    background-color: white;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 4px;
    border-radius: 10px;
}
.nine{
    background-color: white;
}
.ten{
    background-color: white;
}
.eleven{
    background-color: white;
}
.list1{
    width: 100%;
    height: 100%;
}
.listitem2{
    width: 100%;
    height: 20%;
/**border-bottom:3px solid  grey;**/
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: gainsboro;
}
.img1{
    width: 30%;
    height: 70%;
/**border:2px solid red;**/
    border-radius: 20px;
}
.txt3{
    width: 40%;
    height: 90%;
/**border: 1px solid black;**/
    display: flex;
    flex-direction:column;
    justify-content: flex-end;
    align-items: flex-start;
}
.tex1{
    font-size: 35px;
    font-weight: bold;
    font-family: sans-serif;
}
.txt4{
    width: 100%;
    height:40%;
    display: flex;
    align-items: flex-end;
}
.img4{
    width: 20px;
    height: 40px;
}
.txt2{
    font-size: 50px;
    font-weight: bold;
    color: orange;
}
.img2{
    width: 50px;
    height: 50px;
}
.list2{
    width: 100%;
    height: 100%;
}
.listitem3{
    width: 100%;
    height: 23%;
    display: flex;
    justify-content:space-around;
    align-items: center;
}
.img5{
    width: 500px;
    height: 500px;
}
.txt5{
    font-size: 45px;
    font-weight: bold;
    font-family: sans-serif;
    margin-left: 70px;
}
.listitem4{
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: space-around;
    align-items:center;
}
.img6{
    width: 80px;
    height: 80px;
}
.txt6{
    font-size: 35px;
    font-family: sans-serif;
    margin-left: 40px;
    font-weight: bold;
}
.group{
    width: 100%;
}
.img7{
    width: 50px;
    height: 50px;
}
.wuliangye{
    width:100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
.sswiper{
    width:100%;
    height:400px;
}
.view1{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.img8{
    width: 100%;
    height: 100%;
}
.listitem7{
    width: 100%;
    height: 80%;
/**border-bottom:3px solid  grey;**/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.list7{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.img9{
    width: 100%;
    height: 75%;
}
.line1{
    width: 80%;
    height: 20%;
    /**border: 2px solid red;**/

}
.img10{
    width: 100%;
    height: 90%;
    border-radius: 10px;
    margin: 5px;

}
.img10{
    width: 500px;
    height: 500px;
    border-radius: 15px;
}

项目效果图如下(效果视频已经上传):  价格纯属虚构

HarmonyOS开发从0到1：购物页面之商品分类页面

HarmonyOS开发从0到1：购物页面之商品分类页面

HarmonyOS开发从0到1：购物页面之商品分类页面

HarmonyOS开发从0到1：购物页面之商品分类页面

HarmonyOS开发从0到1：购物页面之商品分类页面

HarmonyOS开发从0到1：购物页面之商品分类页面

HarmonyOS开发从0到1：购物页面之商品分类页面

全力以赴,全世界为你让路!

欢迎读者朋友订阅我的专栏:[HarmonyOS开发从0到1]

https://harmonyos.51cto.com/column/35

作者：noutsider

想了解更多内容，请访问： 51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com

商品分类backgroundcommoncname前端前端
点赞
收藏
评论区
推荐文章
blmius blmius
•
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时，报错：原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等，这样可以更容易地在不同的环境中使用MySQL。全局s
4274
0
0
Easter79 Easter79
•
3年前
swap空间的增减方法
（1）增大swap空间去激活swap交换区：swapoff v /dev/vg00/lvswap扩展交换lv：lvextend L 10G /dev/vg00/lvswap重新生成swap交换区：mkswap /dev/vg00/lvswap激活新生成的交换区：swapon v /dev/vg00/lvswap
1306
0
0
Stella981 Stella981
•
3年前
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解
Opencv中Mat矩阵相乘——点乘、dot、mul运算详解2016年09月02日00:00:36 \牧野(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fme.csdn.net%2Fdcrmg) 阅读数：59593
1965
0
0
Wesley13 Wesley13
•
3年前
Java获得今日零时零分零秒的时间（Date型）
publicDatezeroTime()throwsParseException{    DatetimenewDate();    SimpleDateFormatsimpnewSimpleDateFormat("yyyyMMdd00:00:00");    SimpleDateFormatsimp2newS
1305
0
0
Wesley13 Wesley13
•
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败，请联系管理员！');中国在东8区所以加8方法二：selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
1388
0
0
Stella981 Stella981
•
3年前
HIVE 时间操作函数
日期函数UNIX时间戳转日期函数: from\_unixtime语法:   from\_unixtime(bigint unixtime\, string format\)返回值: string说明: 转化UNIX时间戳（从19700101 00:00:00 UTC到指定时间的秒数）到当前时区的时间格式举例：hive   selec
974
0
0
Wesley13 Wesley13
•
3年前
Java日期时间API系列36
　　十二时辰，古代劳动人民把一昼夜划分成十二个时段，每一个时段叫一个时辰。二十四小时和十二时辰对照表：时辰时间24时制子时深夜11：00凌晨01：0023：0001：00丑时上午01：00上午03：0001：0003：00寅时上午03：00上午0
1284
0
0
Wesley13 Wesley13
•
3年前
00：Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork)，斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟，已经成为Web应用程序的首选开发语言。Java是简单易学，完全面向对象，安全可靠，与平台无关的编程语言。
1330
0
0
Stella981 Stella981
•
3年前
Docker 部署SpringBoot项目不香吗？
　　公众号改版后文章乱序推荐，希望你可以点击上方“Java进阶架构师”，点击右上角，将我们设为★“星标”！这样才不会错过每日进阶架构文章呀。　　!(http://dingyue.ws.126.net/2020/0920/b00fbfc7j00qgy5xy002kd200qo00hsg00it00cj.jpg)　　2
1119
0
0
Wesley13 Wesley13
•
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
1596
0
0
Python进阶者 Python进阶者
•
11个月前
Excel中这日期老是出来00：00：00，怎么用Pandas把这个去除
大家好，我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下：这日期老是出来00：00：00，怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下：pd.toexcel之前把这
565
0
0
Stella981
Stella981
Lv1
接天莲叶无穷碧，映日荷花别样红。
文章
1.7w
粉丝
42
获赞
28
热门文章
OpenVPN下载、安装、配置及使用详解
GitHub神器，一个可以白嫖全网无损音乐的神器
OpenWrt 路由器过滤广告的N种方法
Python—执行系统命令的四种方法（os.system、os.popen、commands、subprocess）
SS端加密以及obfs混淆