uniapp tab选项卡简单demon

Posted 2021-06-12 待炒的鱼

<template>
    <view class="content">
        <view class="title-bar">
            <view :class="selIndex==n?\'selIndex\':\'\'" v-for="(i,n) in titleList" @click="selIndexs(n)" :key="n">{{ i }}
            </view>
        </view>
        <view class="tab">
            <scroll-view class="tab-scroll-view" :scroll-left="scrollLeft" scroll-with-animation :scroll-x="true">
                <view class="tab-item" v-for="(item, index) in titleList" :key="index" @touchstart="start" @touchmove="move" @touchend="end">
                    {{item}}
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                scrollLeft: 0,
                selIndex: 0,
                titleList: [\'待付款\', \'待收货\', \'已收货\', \'待评价\', \'售后\'],
                winWidth: 0,
                startX: 0,
                moveX: 0
            }
        },
        onLoad() {
            this.getSysInfo()
        },
        methods: {
            getSysInfo () {
                let that = this
                uni.getSystemInfo({
                    complete(res) {
                        that.winWidth = res.windowWidth
                        console.log(that.winWidth)
                    }
                })
            },
            selIndexs (n) {
                this.selIndex = n
                this.scrollLeft = n*this.winWidth
            },
            start (e) {
                this.startX = e.touches[0].clientX
            },
            move (e) {
                this.moveX = e.touches[0].clientX
            },
            end (e) {
                e.preventDefault();
                if (this.moveX - this.startX < 0) {
                    if (this.titleList.length*this.winWidth>this.scrollLeft) {
                        this.scrollLeft += this.winWidth
                        if ((this.titleList.length-1) > this.selIndex) {
                            this.selIndex +=1
                        }
                    }
                } else {
                    if (this.scrollLeft == 0) {
                        this.scrollLeft = 0
                        this.selIndex = 0
                    } else {
                        this.scrollLeft -= this.winWidth
                        this.selIndex -= 1
                    }
                }
                console.log(this.scrollLeft)
                console.log(this.selIndex)
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .title-bar {
        width: 100%;
        height: 40px;
        font-size: 15px;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .selIndex {
        color: red;
    }

    .tab-scroll-view {
        width: 750rpx;
        height: 100vh;
        flex-direction: row;
        white-space: nowrap;
    }

    .tab-item {
        display: inline-block;
        width: 100vw;
        height: 100%;
        font-size: 16px;
        color: #555;
        border: 1px solid yellow;
        transition: all .5 ease-in-out;
    }
</style>