Vue项目详情页 - 使用递归组件实现详情页列表
此时list已经显示出来如何使用递归组件实现详情页列表父组件Detail.vue里的父组件这时分类就会显示出来然后布局样式一级列表项已经显示出来了,然后如何显示二级列表项呢这里的二级关系.自己调用他自己的这个组件但是没有层级关系这时是三级列表但是头部景点并没有完全盖住下方的字体这是list.vue...
·
此时list已经显示出来
如何使用递归组件实现详情页列表
父组件Detail.vue里的父组件
这时分类就会显示出来
然后布局样式
一级列表项已经显示出来了,然后如何显示二级列表项呢
这里的二级关系.自己调用他自己的这个组件
但是没有层级关系
这时是三级列表
但是头部景点并没有完全盖住下方的字体
这是list.vue
<template> <div> <div class="item" v-for="(item,index) of list" :key="index" > <div class="item-title border-bottom"> <span class="item-title-icon"></span> {{item.title}} </div> <div v-if="item.children" class="item-chilren"> <detail-list :list="item.children"></detail-list> </div> </div> </div> </template> <script> export default { name: "DetailList", props:{ list:Array } } </script> <style lang="stylus" scoped> .item-title-icon position: relative left: .06rem top: .06rem display: inline-block width: .36rem height: .36rem background: url(http://s.qunarzz.com/piao/image/touch/sight/detail.png) 0 -.45rem no-repeat margin-right: .1rem background-size: .4rem 3rem .item-title line-height: .8rem font-size: .32rem padding: 0 .2rem .item-chilren padding: 0 .2rem </style>
这是detail.vue
<template> <div> <detail-banner></detail-banner> <detail-header></detail-header> <div class="content"> <detail-list :list="list"></detail-list> </div> </div> </template> <script> import DetailBanner from './components/Banner' import DetailHeader from './components/Header' import DetailList from './components/List' export default { name: "Detail", components:{ DetailHeader, DetailBanner, DetailList }, data(){ return { list:[{ title:'成人票', children:[{ title:'成人档案票', children:[{ title:'成人三观联票-莫以连锁店销售' }] },{ title:'陈然三馆联票'} ] },{ title:'学生票' },{ title:'儿童票' },{ title:'特惠票' } ] } } } </script> <style lang="stylus" scoped> </style>
更多推荐
已为社区贡献14条内容
所有评论(0)