头部...">
美文网首页
uniapp 顶部固定,底部滑动

uniapp 顶部固定,底部滑动

作者: 可乐小子 | 来源:发表于2022-12-01 11:02 被阅读0次

<template>
<view class="container">
<view class="header">头部</view>
<view class="body">
<view class="item" v-for="(item,index) in subArr" :key="index">
<view class="item-top">测试数据的标题</view>
<image class="item-image" src="@/static/avatar.jpeg"></image>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
subArr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
switchArr: [1, 2, 3, 4],
activeIndex: 0
}
},
onLoad() {

    },
    methods: {
        swithActiveIndex(index) {
            this.activeIndex = index
        }
    }
}

</script>

<style lang="scss">
page {
height: 100%;
}

.container {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.header {
    height: 100rpx;
    background-color: #00C6B2;
    //flex: 1;
    //overflow: auto;

    box-sizing: border-box;
}

.body {
    background: red;
    // flex: 1;
    overflow: auto;
    height: calc(100% - 100rpx);
}

</style>