You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
1.4 KiB
73 lines
1.4 KiB
<template>
|
|
<view class="swiper">
|
|
<uv-swiper
|
|
:list="bannerList" keyName="image"
|
|
indicator
|
|
indicatorMode="dot"
|
|
indicatorInactiveColor="rgba(255, 255, 255, 0.7)"
|
|
height="228rpx"
|
|
@click="onClickBanner"
|
|
></uv-swiper>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
bannerList: [],
|
|
}
|
|
},
|
|
created() {
|
|
this.getData()
|
|
},
|
|
methods: {
|
|
getData() {
|
|
|
|
// todo: fetch
|
|
|
|
this.bannerList = [
|
|
{
|
|
image: '/static/image/temp-14.png',
|
|
},
|
|
{
|
|
image: '/static/image/temp-14.png',
|
|
},
|
|
{
|
|
image: '/static/image/temp-14.png',
|
|
},
|
|
{
|
|
image: '/static/image/temp-14.png',
|
|
},
|
|
{
|
|
image: '/static/image/temp-14.png',
|
|
},
|
|
{
|
|
image: '/static/image/temp-14.png',
|
|
},
|
|
]
|
|
|
|
},
|
|
onClickBanner(index) {
|
|
console.log('onClickBanner', index)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.swiper {
|
|
border-radius: 32rpx;
|
|
overflow: hidden;
|
|
|
|
/deep/ .uv-swiper-indicator__wrapper__dot,
|
|
/deep/ .uv-swiper-indicator__wrapper__dot--active {
|
|
margin: 0 4rpx;
|
|
width: 30rpx;
|
|
height: 10rpx;
|
|
}
|
|
/deep/ .uv-swiper-indicator__wrapper__dot--active {
|
|
background: linear-gradient(to right, #21FEEC 40%, #019AF9);
|
|
}
|
|
}
|
|
</style>
|