vue+elementui Carousel 走马灯一次轮播4张图片

最新推荐文章于 2024-05-28 18:23:51 发布

ru11291230

最新推荐文章于 2024-05-28 18:23:51 发布

阅读量668

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/ru11291230/article/details/129886770

版权

vue

    <el-carousel :loop="false" :autoplay="false" height="380px">
            <el-carousel-item class="el-car-item" v-for="(list, index) in dataList" :key="index">
                <div class="title_img" v-for="(imgList,index2) in list" :key="index2">
                    <a class="card-items" :href="imgList.url" target="_blank">
                        <div class="img-zoom">
                            <img :src="imgList.image"class="" alt="">
                        </div>
                    </a>
                    <div class="item-info text-left title_urk">
                        <a class="card-items" :href="imgList.url" target="_blank">
                            <div class="item-title">{{imgList.title}}</div>
                        </a>
                        <div class="tit_pimg">
                               <!-- 市场价 -->
                                 <div class="shic_price">¥{{imgList.marketprice}}</div>
                                            <!-- 现价 -->
                                 <div class="xian_price">¥{{imgList.price}}</div>
                        </div>
                    </div>
                </div>
            </el-carousel-item>
        </el-carousel>

后端返回数据

dataList: [
        {
          "imglist": "xxx",
          "title": "xxx",
          "marketprice": "xxx",
           "price":"xxx"
        },
        {
          "imglist": "xxx",
          "title": "xxx",
          "marketprice": "xxx",
           "price":"xxx"
        },
        {
          "imglist": "xxx",
          "title": "xxx",
          "marketprice": "xxx",
           "price":"xxx"
        },
        {
         "imglist": "xxx",
          "title": "xxx",
          "marketprice": "xxx",
           "price":"xxx"
        },
        {
          "imglist": "xxx",
          "title": "xxx",
          "marketprice": "xxx",
           "price":"xxx"
        },
        {
          "imglist": "xxx",
          "title": "xxx",
          "marketprice": "xxx",
           "price":"xxx"
        },
      ]

后端返回数据处理

  findlist(){
                let obj = {
                    page: this.queryinfo.page,
					limit: this.queryinfo.size,
                }
                axios.post("{:url('/addons/shop/goods/guess_like', [], false, true)}",obj).then((res) => {
                    if (res.status == 200) {
                        this.dataList = res.data.data.data
                        console.log( this.dataList,'11111111=')
                            this.total = res.data.data.total
                        let newDataList = []
                        let current = 0
                        if(this.dataList && this.dataList.length>0){
                        for(let i=0;i<=this.dataList.length-1;i++){
                            if(i%4 !== 0 || i === 0 ){
                            if(!newDataList[current]){
                                newDataList.push([this.dataList[i]])
                            }else{
                                newDataList[current].push(this.dataList[i])
                            }
                            }else{
                            current++
                            newDataList.push([this.dataList[i]])
                            }
                        }
                        }
                        this.dataList = [...newDataList]
                                        
                      
                    }
                }).catch((err) => {
                })
    

           },

css

.el-car-item {
    width: 100%;
    display: flex;

  }
.title_img{
    width: 270px;
    height: 330px;
    border: solid #ebe9e6 1px;
    margin-right: 20px;
    cursor: pointer;
  }
  .title_img:hover{
    border: solid #ff9039 1px;
    cursor: pointer;
  }
  .img-zoom{
    width: 270px;
    height: 220px;
  }
  .img-zoom img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .title_urk{
    margin-top: 20px;
  }
.item-title{
    height: 30px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 20px;
    margin-left: 10px;
  }
 .tit_pimg{
    display: flex;
    margin-left: 10px;    
    margin-top: 20px;                     

        }
.shic_price{
    font-size: 18px;
    font-weight: 600;
    margin-top: 5px;
    color: red;

}
.xian_price{
    margin-left: 10px;
    text-decoration: line-through;
    color: #5c5252;
    margin-top: 7px;
}