|
| xqd
@@ -1,119 +0,0 @@
|
|
|
-<template>
|
|
|
- <view
|
|
|
- class="swiper-box "
|
|
|
- :class="{
|
|
|
- loading:loading,
|
|
|
- 'main-center':loading,
|
|
|
- 'cross-center': loading
|
|
|
- }"
|
|
|
- :style="{height: height}"
|
|
|
- >
|
|
|
- <u-loading-icon :show="loading" vertical />
|
|
|
- <u-swiper
|
|
|
- v-if="list.length"
|
|
|
- :list="list"
|
|
|
- :height="height"
|
|
|
- :radius="radius"
|
|
|
- style="width: 100%;"
|
|
|
- :bg-color="$colors.bgColor"
|
|
|
- :indicator="true"
|
|
|
- :show-title="true"
|
|
|
- indicator-mode="dot"
|
|
|
- :indicator-style="{bottom: '24rpx'}"
|
|
|
- img-mode=""
|
|
|
- @click="handleClick"
|
|
|
- @change="handleChange"
|
|
|
- >
|
|
|
- <view
|
|
|
- slot="indicator"
|
|
|
- class="indicator"
|
|
|
- >
|
|
|
- <view
|
|
|
- v-for="(item, index) in list"
|
|
|
- :key="index"
|
|
|
- class="indicator__dot"
|
|
|
- :class="[index === currentNum && 'indicator__dot--active']"
|
|
|
- />
|
|
|
- </view>
|
|
|
- </u-swiper>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-
|
|
|
-export default {
|
|
|
- name: 'SwiperBox',
|
|
|
- props: {
|
|
|
- height: {
|
|
|
- type: [Number, String],
|
|
|
- default: '386rpx'
|
|
|
- },
|
|
|
- radius: {
|
|
|
- type: [Number, String],
|
|
|
- default: '0rpx'
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- loading: true,
|
|
|
- // list: [require('../../static/icon/swiper01.png'),require('../../static/icon/swiper01.png')],
|
|
|
- currentNum: 0
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- },
|
|
|
- created() {
|
|
|
- // this.getSwiper()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleClick(index) {
|
|
|
- const item = this.list[index]
|
|
|
- console.log('-->data', item)
|
|
|
- },
|
|
|
- handleChange(e) {
|
|
|
- this.currentNum = e.current
|
|
|
- },
|
|
|
- getSwiper() {
|
|
|
- this.$api.setting.banner().then(res => {
|
|
|
- this.loading = false
|
|
|
- res.data.forEach(obj => {
|
|
|
- this.list.push(obj.image)
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
- ::v-deep .u-swiper{
|
|
|
- width:100% !important;
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- .swiper-box{
|
|
|
- // margin: 20rpx 0;
|
|
|
- // border-radius: 8rpx;
|
|
|
- &.loading{
|
|
|
- background-color: #1B203C;
|
|
|
- }
|
|
|
- .indicator {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- &__dot {
|
|
|
- height: 20rpx;
|
|
|
- width: 20rpx;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: rgba(255, 255, 255, 0.35);
|
|
|
- margin: 0 10px;
|
|
|
- transition: background-color 0.3s;
|
|
|
-
|
|
|
- &--active {
|
|
|
- background-color: #6EEBE8;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</style>
|
