Vue-cli横向滑动列表

Posted 2021-08-19 码上暴富

Vue-cli横向滑动列表

• 横向滑动列表

横向滑动列表

使用vue-cli + elementUI + swiper

<template>
    <div class="IndexRanking boxW1280">
        <div class="content">
            <div class="title">
                <div>
                    <i class="el-icon-trophy icon-css"></i>
                    <span>积分排行</span>
                </div>
                <div>
                    <router-link to="" style="cursor: auto">
                        <img src="../assets/img/index/arrow4.png" alt="">
                    </router-link>
                </div>
            </div>
            <div class="content">
                <swiper :options="swiperOption">
                    <!-- 前三名 -->
                    <swiper-slide v-for="(item, i) in indexRankingData" :key="i">
                        <div class="swiper-left">
                            <img class="img" :src="item.studentImgPath" alt="头像加载失败">
                        </div>
                        <div class="swiper-right">
                            <h3>{{item.studentName}}</h3>
                            <p>
                                <i class="el-icon-trophy icon-css"></i>
                                <span>积分：{{item.studentPoint}}</span>
                            </p>
                            <!-- 第四名之后 排名积分 前三名是ranking, 否则ranking4 -->
                            <div :class="item.pointph > 3 ? 'ranking4' : 'ranking'">
                                <i class="el-icon-medal icon-css"></i>
                                <span>{{item.pointph}}</span>
                            </div>
                        </div>
                    </swiper-slide>
                    <el-button @click="loadMore" class="loadMore">加载更多</el-button>
                </swiper>
            </div>
        </div>
    </div>
</template>

<script>
    import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'
    // cnpm install vue-awesome-swiper swiper@5.4.5 --save
    import {getIndexRanking} from "@/api"; // 封装的发送请求的
    export default {
        name: 'IndexRanking',
        components: {
            Swiper,
            SwiperSlide
        },
        data () {
            return {
                pageSize: 10,
                pageNum: 1,
                pageTotal: 0,
                swiperOption: { // 配置swiper
                    slidesPerView: 'auto',
                    freeMode: true,
                    freeModeMinimumVelocity: 1,
                    observer: true,
                    observeParents: true,
                    observeSlideChildren: true
                }
                ,indexRankingData: []
            }
        },
        methods: {
            /* 请求数据 */
            getIndexRankingData () {
                getIndexRanking({
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                }).then(data => {
                    let res = data.data.list;
                    this.indexRankingData = res;
                    this.pageTotal = data.data.total;
                    // this.indexRankingData = res.slice(0, 100);
                }).catch(err => {
                    console.log(err)
                })
            },
            /* 加载更多 */
            loadMore () {
                this.pageSize += 10;
                if (this.pageSize < this.pageTotal + 10) {
                    this.getIndexRankingData()
                }else {
                    this.$message("没有更多数据了...");
                }
            }
        },
        created () {
            this.getIndexRankingData()
        }
    }
</script>

<style lang="scss">
    .IndexRanking{
        .content{
            .title{
                display: flex;
                justify-content: space-between;
                margin-top: 70px;
                .icon-css{
                    font-size: 30px;
                    color: #0066FF;
                }
                span{
                    font-size: 24px;
                    line-height: 20px;
                    color: #333;
                    margin-left: 15px;
                    vertical-align: baseline;
                }
            }
            .content{
                .swiper-container{
                    width: 100%;
                    height: 140px;
                    margin-top: 28px;
                    box-sizing: border-box;
                    padding-right: 40px;
                    .swiper-wrapper{
                        .swiper-slide{
                            overflow: auto;
                            display: flex;
                            width: 240px !important;
                            height: 120px;
                            background: #FFFFFF;
                            border: 1px solid #f5f5f5;
                            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
                            border-radius: 10px;
                            margin-right: 17px;
                            box-sizing: border-box;
                            &:first-child{
                                margin-left: 4px;
                            }
                            &:last-child{
                                margin-right: 4px;
                            }
                            .swiper-left{
                                /*width: 100%;*/
                                /*height: 100%;*/
                                img{
                                    width: 80px;
                                    height: 80px;
                                    border-radius: 50%;
                                    margin: 20px;
                                }
                            }
                            .swiper-right{
                                position: relative;
                                width: 200px;
                                h3{
                                    color: #333;
                                    font-weight: bold;
                                    font-size: 18px;
                                    line-height: 23px;
                                    margin-top: 30px;
                                }
                                p{
                                    margin-top: 12px;
                                    span{
                                        color: #333;
                                        font-size: 14px;
                                        line-height: 18px;
                                        margin-left: 4px;
                                    }
                                    .icon-css{
                                        color: #EA5504;
                                    }
                                }
                                .ranking{
                                    position: absolute;
                                    top: 0;
                                    right: 0;
                                    .icon-css{
                                        font-size: 30px;
                                        color: #FEE701;
                                    }
                                    span{
                                        position: absolute;
                                        top: 10px;
                                        left: 7px;
                                        display: block;
                                        width: 16px;
                                        height: 16px;
                                        line-height: 16px;
                                        color: #fff;
                                        background-color: #F5B319;
                                        text-align: center;
                                        border-radius: 50%;
                                    }
                                }
                                .ranking4{
                                    position: absolute;
                                    top: 0;
                                    right: 0;
                                    .icon-css{
                                        display: block;
                                        position: absolute;
                                        width: 0;
                                        height: 0;
                                        border-top: 30px solid #0066FF;
                                        border-left: 30px solid transparent;
                                        top: 0;
                                        right: 0;
                                    }
                                    span{
                                        position: absolute;
                                        top: 0;
                                        left: -16px;
                                        display: block;
                                        color: #fff;
                                        font-size: 13px;
                                        transform: rotate(45deg);
                                    }
                                }
                            }
                        }
                        .swiper-slide{
                            &:nth-child(2) {
                                .ranking{
                                    .icon-css{
                                        color: #90C3F0;
                                    }
                                    span{
                                        background-color: #4E9EE5;
                                    }
                                }
                            }
                            &:nth-child(3){
                                .ranking{
                                    .icon-css{
                                        color: #D8A18A;
                                    }
                                    span{
                                        background-color: #DA784F;
                                    }
                                }
                            }
                        }
                    }
                }
                .loadMore{
                    height: 120px;
                    padding: 0 10px;
                    border: 1px solid #0066ff;
                    span{
                        color: #0066ff;
                        -webkit-writing-mode: vertical-rl;
                        writing-mode: vertical-rl;
                    }
                }
            }
        }
    }
</style>

结果

滑动前	滑动后