swiper_banner图的封装

Posted robot666

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了swiper_banner图的封装相关的知识,希望对你有一定的参考价值。

当然,插件市场也是有类似的封装的

<style lang="scss" scoped>
.bg{
background: white;
padding: 10rpx 0;
}
.swiper{
width: 710rpx;
height: 220rpx;
border-radius:15rpx ;
overflow: hidden;
margin: auto;
.swiper-item{
height: 100%;
width: 100%;
border-radius:15rpx ;
overflow: hidden;
}
.swiper-image{
height: 100%;
width: 100%;
border-radius:15rpx ;
}
}
</style>

<template>
<view class="bg">
<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="5000" :duration="500" :circular="true">
<swiper-item v-for="(item,index) in list" :key="index" @click="toUrl(item.link)">
<view class="swiper-item">
<image class="swiper-image" :src="item.imageUrl"></image>
</view>
</swiper-item>
</swiper>
</view>
</template>

<script>
export default {
props:{
list:{
type: Array,
required: true,
default:()=>[]
},
},
methods:{
toUrl(url){
if(url){
uni.navigateTo({
url:url
})
}
},
}
}
</script>

以上是关于swiper_banner图的封装的主要内容,如果未能解决你的问题,请参考以下文章

如何使用微信小程序制作banner轮播图?

JS 实现banner图的滚动和选择效果

做一个常规的banner图——负边距的使用banner图的拼法

7Flutter banner_view 轮播图的使用

原生JS实现banner图的滚动与跳转

如何使用JS实现banner图滚动