六十八、完成vue项目推荐和周末游组件，并使用ajax发起ajax请求 -尊龙游戏旗舰厅官网

</div><div class="header-input"><span class="iconfont">&#xe602;输入城市/景点/游玩主题</div><div class="header-right">{{this.city}}<span class="iconfont arrow-icon">&#xe658;</div></div> </template><script> export default {name: 'homeheader',props: {city: string} } </script><style lang="stylus" scoped> @import '~styles/varibles.styl'; .headerdisplay: flexline-height: 0.86remheight: 0.86rembackground: $bgcolorcolor: #fff.header-leftwidth: 0.64remfloat: left.back-icontext-align: centerfont-style: 0.4rem.header-inputflex: 1background: #fffheight: 0.64remline-height: 0.64remmargin-top: 0.12remmargin-left: 0.2remboirder-radius: 0.1remcolor: #ccc.header-rightwidth: 1.24remfloat: righttext-align: center.arrow-iconmargin-left: -0.04remfont-size: 0.24rem </style>

icons.vue

<template><div class="icons"><swiper :options="swiperoption"><swiper-slide v-for="(page, index) of pages" :key="index"><divclass="icon"v-for="item of page":key="item.id"><div class='icon-img'><img class='icon-img-content' :src='item.imgurl' /></div><p class="icon-desc">{{item.desc}}</p></div></swiper-slide></swiper></div> </template><script> export default {name: 'homeicons',props: {list: array},data () {return {swiperoption: {autoplay: false}}},computed: {pages () {const pages = []this.list.foreach((item, index) => {const page = math.floor(index / 8)if (!pages[page]) {pages[page] = []}pages[page].push(item)})return pages}} } </script><style lang="stylus" scoped>@import '~styles/varibles.styl'@import '~styles/mixins.styl'.icons >>> .swiper-containerheight: 0padding-bottom: 50%.iconsmargin-top: .1rem.iconposition: relativeoverflow: hiddenfloat: leftwidth: 25%height: 0padding-bottom: 25%.icon-imgposition: absolutetop: 0left: 0right: 0bottom: .44rembox-sizing: border-boxpadding: .1rem.icon-img-contentdisplay: blockmargin: 0 autoheight: 100%.icon-descposition: absoluteleft: 0right: 0bottom: 0height: .44remline-height: .44remtext-align: centercolor: $darktextcolorellipsis() </style>

recommend.vue

<template><div><div class="title">热销推荐</div><ul><liclass="item border-bottom"v-for="item of list":key="item.id"><img class="item-img" :src="item.imgurl" /><div class="item-info"><p class="item-title">{{item.title}}</p><p class="item-desc">{{item.desc}}</p><button class="item-button">查看详情</button></div></li></ul></div> </template><script> export default {name: 'homerecommend',props: {list: array} } </script><style lang="stylus" scoped>@import '~styles/mixins.styl'.titlemargin-top: .2remline-height: .8rembackground: #eeetext-indent: .2rem.itemoverflow: hiddendisplay: flexheight: 1.9rem.item-imgwidth: 1.7remheight: 1.7rempadding: .1rem.item-infoflex: 1padding: .1remmin-width: 0.item-titleline-height: .54remfont-size: .32remellipsis().item-descline-height: .4remcolor: #cccellipsis().item-buttonline-height: .44remmargin-top: .16rembackground: #ff9300padding: 0 .2remborder-radius: .06remcolor: #fff </style>

swiper.vue

<template><div class="wrapper"><swiper :options="swiperoption" v-if="showswiper"><swiper-slide v-for="item of list" :key="item.id"><img class="swiper-img" :src="item.imgurl" /></swiper-slide><div class="swiper-pagination" slot="pagination"></div></swiper></div> </template><script> export default {name: 'homeswiper',props: {list: array},data () {return {swiperoption: {pagination: '.swiper-pagination',loop: true}}},computed: {showswiper () {return this.list.length}} } </script><style lang="stylus" scoped>.wrapper >>> .swiper-pagination-bullet-activebackground: #fff.wrapperoverflow: hiddenwidth: 100%height: 0padding-bottom: 31.25�ckground: #eee.swiper-imgwidth: 100% </style>

weekend.vue

<template><div><div class="title">周末去哪儿</div><ul><liclass="item border-bottom"v-for="item of list":key="item.id"><div class="item-img-wrapper"><img class="item-img" :src="item.imgurl" /></div><div class="item-info"><p class="item-title">{{item.title}}</p><p class="item-desc">{{item.desc}}</p></div></li></ul></div> </template><script> export default {name: 'homeweekend',props: {list: array} } </script><style lang="stylus" scoped>@import '~styles/mixins.styl'.titleline-height: .8rembackground: #eeetext-indent: .2rem.item-img-wrapperoverflow: hiddenheight: 0padding-bottom: 37.09%.item-imgwidth: 100%.item-infopadding: .1rem.item-titleline-height: .54remfont-size: .32remellipsis().item-descline-height: .4remcolor: #cccellipsis() </style>

参考课程：慕课网vue2.5->2.6->3.0 开发去哪儿网app 从零基础入门到实战项目开发

请一键三连！！！！！

与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是尊龙游戏旗舰厅官网为你收集整理的六十八、完成vue项目推荐和周末游组件，并使用ajax发起ajax请求的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。