ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue列表左右箭头滑动 vue+typescript实现左右箭头翻页,类似轮播图效果

2021-06-05 13:58:56  阅读:411  来源: 互联网

标签:vue 翻页 item color else content 箭头 num width


今天的内容是在工作终于到的问题,先上图吧:
在这里插入图片描述
这个是iview-design官网的tabs切换里面的内容,红色圈住的部分就是今天的内容,左右箭头可以切换,内容可以自定义。

html代码:

<div class="content-item">
    		<!-- 左箭头 -->
            <a href="javascript:;" v-if="qulityList.length>4" class="prev" @click="translateLeft">
                <i class="el-icon-arrow-left"></i>
            </a>
    		<!-- 中间部分的内容 -->
            <div class="content-item-box" id="amount">
                <div class="content-item-nav" :style="{transform: 'translateX(calc(('+amountWidth+' + 15px) * '+num+'))'}">
                    <!-- 这一部分的内容自己可以根据自己的需要自定义 -->
                    <div
                        class="amount"
                        v-for="(item, index) in qulityList"
                        :key="index"
                        @click="getDetail(item)"
                    >
                        <div class="amount-item">
                            <div class="amount-item-sub">
                                <div>
                                    <span>{{ item.name }}</span>
                                </div>
                                <div class="state" :class="item.state == 'A' ? 'state-red' : 'state-green'">
                                    <span>{{ item.state == 'A' ? '未达标' : '达标'}}</span>
                                </div>
                            </div>
                            <div class="amount-item-sub">
                                <span style="font-size:36px">{{ item.qulity }}</span>
                                <span>类</span>
                            </div>
                        </div>
                        <div class="icon iconfont icon-hedao"></div>
                    </div>
                </div>
            </div>
    		<!-- 右箭头 -->
            <a href="javascript:;" v-if="qulityList.length>4" class="next" @click="translateRight">
                <i class="el-icon-arrow-right"></i>
            </a>
</div>

css代码:

.content-item {
    display: flex;
    position: relative;
    padding: 0 32px;
    .prev,
    .next {
        width: 20px;
        height: 100%;
        background-color: #999999;
        color: #ffffff;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: absolute;
    }
    .prev {
        left: 0;
    }
    .next {
        right: 0;
    }
    .content-item-box {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }
    .content-item-nav {
        padding-left: 0;
        margin: 0;
        float: left;
        list-style: none;
        box-sizing: border-box;
        position: relative;
        transition: transform .5s ease-in-out;
    }
    .amount {
        position: relative;
        padding: 10px 10px 0;
        margin-right: 15px;
        width: 10.4%;
        color: #fff;
        border-radius: 4px;
        cursor: pointer;
        display: inline-block;
        height: 100%;
        margin-right: 16px;
        box-sizing: border-box;
        transition: color .3s ease-in-out;
        &-item {
            &-sub {
                &:first-of-type {
                    display: flex;
                    justify-content: space-between;
                }
                &:nth-of-type(2) {
                    text-align: center;
                    line-height: 54px;
                }
            }
        }
        .icon {
            position: absolute;
            bottom: 0;
            right: 0;
            color: rgba($color: #fff, $alpha: 0.15);
        }
        .icon-hedao:before {
            font-size: 38px;
        }
        .state {
            padding: 2px 5px;
            border-radius: 2px;
        }
        .state-red {
            background-color: #ff5a47;
        }
        .state-green {
            background-color: #32bb53;
        }
    }
}

typescript代码:

// 两个点击事件的,重要的部分,这里我是固定了左右箭头中间的部分的个数,可以根据自己的需要做响应式的
// 点击左移的按钮
translateLeft() {
    if (this.num == 0) {
        return
    }
    if (this.num <= -4) {
        this.num += 4;
    } else if (this.num == -3) {
        this.num += 3;
    } else if (this.num == -2) {
        this.num += 2;
    } else if (this.num == -1) {
        this.num += 1;
    }
}
// 点击右移的按钮
translateRight() {
    if (this.num == - (this.qulityList.length - 4)) {
        return
    }
    if ((this.qulityList.length + (this.num - 4)) >= 4) {
        this.num -= 4;
    } else if ((this.qulityList.length + (this.num - 4)) == 3) {
        this.num -= 3;
    } else if ((this.qulityList.length + (this.num - 4)) == 2) {
        this.num -= 2;
    } else if ((this.qulityList.length + (this.num - 4)) == 1) {
        this.num -= 1;
    }
}
// 根据浏览器窗口的大小改变左右箭头中间的每个单元的宽度
mounted() {
    var width: any = (document.getElementById("amount") as any).clientWidth / 4 - 15;
    this.amountWidth = width + "px";
    window.onresize = () => {
        return (() => {
            var width: any = (document.getElementById("amount") as any).clientWidth / 4 - 15;
            this.amountWidth = width + "px";
        })();
    };
}

注意:样式均可以根据自己的需要来修改,此文章仅供参考!

标签:vue,翻页,item,color,else,content,箭头,num,width
来源: https://blog.csdn.net/weixin_45803033/article/details/117594036

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有