Vue项目中常见问题(23)动态展示Floor组件

gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master

1.查看数据对应的位置

2.为什么这里小轮播图放在mounted中能实现效果,第一次书写swiper大轮播图放这里面缺不行

完整代码:

gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

我们可以把json数据复制到JSON在线解析及格式化验证 - JSON.cn

进行解析,解析后看起来更好看一些

1.查看数据对应的位置

bigImg的线和imgUrl的线换一下

2.为什么这里小轮播图放在mounted中能实现效果,第一次书写swiper大轮播图放这里面缺不行

第一次书写轮播图的时候,是在当前组件内部发请求、动态渲染结构[前台至少服务器数据需要回来],因此第一次的写法在这里不行

现在的这种写法为什么可以,因为请求时父组件发的,父组件通过props传递过来,而且结构都已经有了的情况下执行mounted

完整代码:

<template><!--楼层--><div class="floor"><div class="py-container"><div class="title clearfix"><h3 class="fl">{{list.name}}</h3><div class="fr"><ul class="nav-tabs clearfix"><li class="active" v-for="(nav,index) in list.navList" :key="index"><a href="#tab1" data-toggle="tab">{{nav.text}}</a></li></ul></div></div><div class="tab-content"><div class="tab-pane"><div class="floor-1"><div class="blockgary"><ul class="jd-list"><li v-for="(keyword,index) in list.keywords" :key="index">{{keyword}}</li></ul><img :src="list.imgUrl" /></div><div class="floorBanner"><!-- 轮播图的地方 --><div class="swiper-container" ref="cur"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(carousel,index) in list.carouselList" :key="carousel.id"><img :src="carousel.imgUrl" /></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div></div><div class="split"><span class="floor-x-line"></span><div class="floor-conver-pit"><img :src="list.recommendList[0]" /></div><div class="floor-conver-pit"><img :src="list.recommendList[1]" /></div></div><div class="split center"><img :src="list.bigImg" /></div><div class="split"><span class="floor-x-line"></span><div class="floor-conver-pit"><img :src="list.recommendList[2]" /></div><div class="floor-conver-pit"><img :src="list.recommendList[3]" /></div></div></div></div></div></div></div>
</template><script>
//引入Swiper  引入样式这步我们在main.js中已经引了
import Swiper from 'swiper'
export default {name:"",props:['list'],//组件挂载完毕的地方mounted(){//第一次书写Swiper的时候,在mounted当中书写是不可以的,但是为什么现在这里可以啦!//第一次书写轮播图的时候,是在当前组件内部发请求、动态渲染结构[前台至少服务器数据需要回来],因此第一次的写法在这里不行//现在的这种写法为什么可以,因为请求时父组件发的,父组件通过props传递过来,而且结构都已经有了的情况下执行mountedvar mySwiper = new Swiper(this.$refs.cur, //用refs来获取DOM{//第一个参数：设置轮播图方向【属性这有两个：水平、垂直】// direction: 'vertical', // 开启循环模式loop: true,// 如果需要分页器pagination: {el: '.swiper-pagination',//点击小球的时候也切换图片clickable:true },// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},})}
};
</script>

Vue项目中常见问题(23)动态展示Floor组件相关推荐

vue项目中常见问题及解决方案
vue项目中常见问题及解决方案参考文章: (1)vue项目中常见问题及解决方案 (2)https://www.cnblogs.com/jiekzou/p/11011271.html (3)https ...
Vue项目中如何设置动态的TDK
TDK是什么 TDK就是网站的标题(title).描述(description)和关键词(keyword) TDK在哪里上面大佬对TDK的概念解释的很全面,但是在网页中的TDK在哪里呢,作为开发人员 ...
Vue项目中常见问题(55)提交订单、获取订单号、展示支付信息
目录 gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master 业务需求:完成提交订单的业务 1.支付静态组件先完成 Pay静态 ...
Vue项目中用户的头像展示
效果展示: element中已经有对应的组件了,直接封装成公用的组件使用即可在@/components/UploadImage/index.vue(注意我们要自定义上传,并上传到第三方服务器中,所以 ...
vue项目中运用webpack动态配置打包多种环境域名
在如今前后端分离,各种框架盛行的前端界,对项目的打包要求也越来越复杂,本人分享一个vue项目里,根据命令行输入不同的命令,打包出不同环境域名的方法.(欢迎纠错,谢谢.) 1. 安装插件 cross-e ...
详解如何在vue项目中引入饿了么elementUI组件
在开发的过程之中,我们也经常会使用到很多组件库:vue 常用ui组件库: https://blog.csdn.net/qq_36538012/article/details/82146649 今天具体 ...
VUE项目中CSS设置动态宽度的方法
网上找到三种方法: 一.使用cumputed 首先你务必看Vue的官方文档.涉及到的基础知识有: 绑定内联样式的使用 computed的使用文档写的都是基础使用.那么在项目实战中如何使用,两步就能实 ...
vue项目中使用Echarts 动态更改图表数据， Vue 折线图、柱状图等图表动态刷新，
问题:在vue组件中,用echarts插件动态获取.修改图表数据解决:已解决! 第一步:打开cmd命令窗口安装echarts依赖安装:npm install echarts -S 第二步:在m ...
【vue】在vue项目中按顺序动态24个英文字母选项：A B C D E F......
效果展示: 点击增加选项和答案后,会按顺序新增24位的英文字母:  <el-button type="danger" size=&quo ...

Vue项目中常见问题(23)动态展示Floor组件

gitee仓库地址:登录 - Gitee.comhttps://gitee.com/CMD-UROOT/sph-project/commits/master

1.查看数据对应的位置

2.为什么这里小轮播图放在mounted中能实现效果,第一次书写swiper大轮播图放这里面缺不行

完整代码:

Vue项目中常见问题(23)动态展示Floor组件相关推荐

最新文章

热门文章