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图的封装的主要内容，如果未能解决你的问题，请参考以下文章