加载插件:
import { Swiper } from 'vux'
export default {
components: {
Swiper
},
}
html:
<swiper loop auto :aspect-ratio="180/360" :list="urlList" dots-position="center" ></swiper>
传下面这个数据进去就能跳
urlList:[
{
url: 'http://m.baidu.com',
img: '',
},
{
url: 'http://m.baidu.com',
img: '',
},
]
用这个方法来整合成上面的数据
for(var i = 0;i < res.data.carous.length;i++){
this.urlList.push({img:res.data.carous[i].fdcImage,url:...})
}
import { Swiper } from 'vux'
export default {
components: {
Swiper
},
}
html:
<swiper loop auto :aspect-ratio="180/360" :list="urlList" dots-position="center" ></swiper>
传下面这个数据进去就能跳
urlList:[
{
url: 'http://m.baidu.com',
img: '',
},
{
url: 'http://m.baidu.com',
img: '',
},
]
用这个方法来整合成上面的数据
for(var i = 0;i < res.data.carous.length;i++){
this.urlList.push({img:res.data.carous[i].fdcImage,url:...})
}
本文介绍了如何在Vue项目中利用vux库的Swiper组件实现轮播图并进行页面跳转。通过导入Swiper组件,设置loop和auto属性创建自动循环的轮播效果,然后结合数据动态生成轮播图片和链接,从而达到点击轮播图后跳转到相应URL的目的。
1987

被折叠的 条评论
为什么被折叠?



