博客

功能描述：该轮播图占满整个屏幕，上下滑动切换下一个商品的图片，左右滑动切换当前商品的图片，并在加载图片时添加遮罩层。

<template>
    <view>
       <view class="uni-margin-wrap">
            <swiper class="swiper" circular :vertical="true" @change="changeCurrent" 
                :current="index">
                <swiper-item v-for="(item,index) in allGoodImgLists" :key="index">
                    <swiper class="swiper" circular @change="changeLocalCurrent" 
                        :current="localIndex">
                        <swiper-item class="swiper-item" v-for="(item,index) in goodsImgList"                                     :key="index">
                            <image class="img" @load="imgLoadSuccess()" :src="item" 
                              mode="aspectFit"></image>
                        </swiper-item>
                    </swiper>
                </swiper-item>
            </swiper>
        </view>    
    <!-- 图片是否加载成功 -->
        <u-overlay :show="imgLoadShow" @click="imgLoadShow = false" opacity="0.8">
            <u-loadmore status="loading" loadingText="图片正在加载" iconSize="69" fontSize="3                0" color="#fff" iconColor="#fff">
            </u-loadmore>
        </u-overlay>
    </view>
</template>

<script>
    import {getProductList} from '@/api/xxx.js'
    export default {
        data() {
            return {
                index: 0, //当前商品-在所有商品的位置
                localIndex: 0, //当前图片-在当前商品所有图片的位置
                goodsImgList: [], //当前商品的所有图片
                allGoodImgLists: [], //所有商品的第一张图片
                imgLoadShow:false,//是否显示遮罩层
                loadImageStatus:'0',//判断图片是否加载成功
                productList:'',//保存所有商品的所有数据
            }
        }，
        created(){
            this.getAllProductList();
        }
        onLoad(option) {
            this.overlay();
        },
        methods:{
            //获取所有商品数据
            getAllProductList(){
                 getProductList(xxx).then((res)=>{
                        this.productList = res.data.productList;
                        this.goodsImgList = res.data.productList[0].imgsUrl;
                        for (let i = 0; i < res.data.productList.length; i++) {
                            this.allGoodImgLists.push(res.data.productList[i].imgsUrl[0])
                        }
                  })
            }
            //遮罩层
            overlay(){
                 if (this.loadImageStatus == 0) {
                 this.imgLoadShow = true;
                  }
             }，
             // 图片加载成功时调用
            imgLoadSuccess() {
                this.loadImageStatus++;
                this.imgLoadShow = false;
            },
            //上下切换轮播图-切换新的商品的图片
            changeCurrent(e){
                this.imgLoadShow = true;
                this.index = e.detail.current;
                this.localIndex = 0;
                //当前商品的图片重新赋值
                this.goodsImgList = [];
                //参考
                this.goodsImgList = this.productList[e.detail.current].imgsUrl;
            }，
            //左右切换轮播图-切换当前商品的不同图片
            changeLocalCurrent(e) {
                console.log(e);
                this.localIndex = e.detail.current;
            },
        }
    }
</script>

<style scoped lang="scss">
.uni-margin-wrap {
        width: 100%;
        min-height: 100vh;
 }
.swiper {
        height: 100%;
        width: 100%;
        z-index: 1;
        .swiper-item {
            height: 100%;
            width: 100%;
            display: flex;
            overflow: hidden;
            justify-content: center;
            align-items: center;
            .img {
                width: 100%;
                height: 100%;
                background-size: cover;
            }
         }
}
</style>