美文网首页
APICloud+Vue.js商城实战-6.商品分类页面（主分类

APICloud+Vue.js商城实战-6.商品分类页面（主分类

作者: 挤时间学习的阿龙 | 来源:发表于2019-05-05 15:07 被阅读0次
tp5 app.jpg

1、小技巧：页面数据渲染，用浏览器调试

原因：本页面中使用的APICloud ajax请求后台数据，需要放到模拟器或者手机中才可以调试，可以把接口请求的到数据，放到data数组中，然后再页面渲染，使用浏览器查看效果
（1）postman请求api数据接口，然后把下图中红框内数据复制


image.png

（2）把调取的数据放到data{list:[ ]}中

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            cun_index:0,   //主分类选中下标
            list: [
                {
                    "id": 59,
                    "pid": 0,
                    "cate_name": "电脑办公",
                    "cover": 0,
                    "create_time": 1486199792,
                    "update_time": 1556976157,
                    "sort": 0,
                    "status": 1
                },
                {
                    "id": 61,
                    "pid": 0,
                    "cate_name": "手机数码",
                    "cover": 0,
                    "create_time": 1556969666,
                    "update_time": 1556976122,
                    "sort": 1,
                    "status": 1
                },
                {
                    "id": 65,
                    "pid": 0,
                    "cate_name": "家用电器",
                    "cover": 0,
                    "create_time": 1556976171,
                    "update_time": 0,
                    "sort": 2,
                    "status": 1
                },
                {
                    "id": 66,
                    "pid": 0,
                    "cate_name": "美妆护肤",
                    "cover": 0,
                    "create_time": 1556976191,
                    "update_time": 0,
                    "sort": 3,
                    "status": 1
                },
                {
                    "id": 68,
                    "pid": 0,
                    "cate_name": "汽车生活",
                    "cover": 0,
                    "create_time": 1556976255,
                    "update_time": 0,
                    "sort": 5,
                    "status": 1
                },
                {
                    "id": 75,
                    "pid": 0,
                    "cate_name": "运动户外",
                    "cover": 0,
                    "create_time": 1556976357,
                    "update_time": 0,
                    "sort": 13,
                    "status": 1
                }
            ],     //主分类
            children_list:[],  //子分类
        },
        methods: {
            init: function () {
                vm.list = [];
                api.ajax({
                    url: cate_list_url,
                    method: 'post',
                    timeout: 30,
                    dataType: 'json',
                    returnAll: false,
                }, function (ret, err) {
                    if (ret) {
                        vm.list = ret.data;
                        console.log(JSON.stringify(vm.list));
                    } else {
                        console.log(JSON.stringify(err));
                    }
                });
            },
        }
    });
    apiready = function () {
        vm.init();
    };
</script>

（3）用浏览器调试查看页面效果


image.png

2、商品分类（二级分类），主分类页面制作

（1）html代码
<html class="">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="../../css/dangdang-app.css?2016051117">
    <style>
        .main_box .class_list_nav_box ul li {
            font-size: 13px;
            border-left: 3px solid #fafafa;
            border-right: 1px solid #e6e6e6;
            height: auto !important;
            line-height: 20px;
            text-align: center;
            color: #4d525d;
            padding: 15px 0px;
            border-bottom: 1px solid #e6e6e6;
        }
    </style>
</head>
<body>
<section class="main">
    <div class="main_box">
        <div id="app">
            <nav class="class_list_nav">
                <div class="class_list_nav_box" id="class_list_nav_box" dd_name="一级分类" style="overflow: hidden;">
                    <ul style="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, 0px) scale(1) translateZ(0px);">
                        <template v-for="(vo,index) in list">
                        <li v-bind:class="{ on: index==cun_index }">
                            {{ vo.cate_name }}
                        </li>
                        </template>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</section>
</body>
</html>

（2）js代码

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js" ></script>
<script type="text/javascript" src="../../script/vue.js" ></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            cun_index:0,   //主分类选中下标
            list: [],     //主分类
            children_list:[],  //子分类
        },
        methods: {
            init: function () {
                vm.list = [];
                api.ajax({
                    url: cate_list_url,
                    method: 'post',
                    timeout: 30,
                    dataType: 'json',
                    returnAll: false,
                }, function (ret, err) {
                    if (ret) {
                        vm.list = ret.data;
                        console.log(JSON.stringify(vm.list));
                    } else {
                        console.log(JSON.stringify(err));
                    }
                });
            },
        }
    });
  //页面初始化函数
    apiready = function () {
        vm.init();
    };
</script>
（3）运行效果
image.png

3、切换分类高亮显示，onclick事件

（1）添加点击事件

<li @click="init_children_list(index)" v-bind:class="{ on: index==cun_index }">
                            {{ vo.cate_name }}
                        </li>

（2）创建点击方法

init_children_list:function (index) {
                console.log(index);  //看（3）图中的打印结果
                vm.cun_index = index;
            }

（3）显示图片


image.png

4、本页完整代码

实际使用记得把data中的演示数据删除掉

<html class="">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" href="../../css/dangdang-app.css?2016051117">
    <style>
        .main_box .class_list_nav_box ul li {
            font-size: 13px;
            border-left: 3px solid #fafafa;
            border-right: 1px solid #e6e6e6;
            height: auto !important;
            line-height: 20px;
            text-align: center;
            color: #4d525d;
            padding: 15px 0px;
            border-bottom: 1px solid #e6e6e6;
        }
    </style>
</head>
<body>
<section class="main">
    <div class="main_box">
        <div id="app">
            <nav class="class_list_nav">
                <div class="class_list_nav_box" id="class_list_nav_box" dd_name="一级分类" style="overflow: hidden;">
                    <ul style="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, 0px) scale(1) translateZ(0px);">
                        <template v-for="(vo,index) in list">
                        <li @click="init_children_list(index)" v-bind:class="{ on: index==cun_index }">
                            {{ vo.cate_name }}
                        </li>
                        </template>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
</section>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js" ></script>
<script type="text/javascript" src="../../script/vue.js" ></script>
<!--自己做的-->
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            cun_index:0,   //主分类选中下标
            list: [
                {
                    "id": 66,
                    "pid": 0,
                    "cate_name": "美妆护肤",
                    "cover": 0,
                    "create_time": 1556976191,
                    "update_time": 0,
                    "sort": 3,
                    "status": 1
                },
                {
                    "id": 68,
                    "pid": 0,
                    "cate_name": "汽车生活",
                    "cover": 0,
                    "create_time": 1556976255,
                    "update_time": 0,
                    "sort": 5,
                    "status": 1
                },
                {
                    "id": 75,
                    "pid": 0,
                    "cate_name": "运动户外",
                    "cover": 0,
                    "create_time": 1556976357,
                    "update_time": 0,
                    "sort": 13,
                    "status": 1
                }
            ],     //主分类
            children_list:[],  //子分类
        },
        methods: {
            init: function () {
                vm.list = [];
                api.ajax({
                    url: cate_list_url,
                    method: 'post',
                    timeout: 30,
                    dataType: 'json',
                    returnAll: false,
                }, function (ret, err) {
                    if (ret) {
                        vm.list = ret.data;
                        console.log(JSON.stringify(vm.list));

                    } else {
                        console.log(JSON.stringify(err));
                    }
                });
            },
            init_children_list:function (index) {
                console.log(index);
                vm.cun_index = index;
            }
        }
    });
    apiready = function () {
        vm.init();
    };
</script>

相关文章

网友评论

      本文标题：APICloud+Vue.js商城实战-6.商品分类页面（主分类

      本文链接：https://www.haomeiwen.com/subject/xyxhoqtx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|APICloud+Vue.js商城实战-6.商品分类页面（主分类|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！