关于微信小程序:微信小程序完美解决scrollview高度自适应问题

第一种状况，scroll-view占据整屏

scroll-view {

    height: 100vh;

}

第二种状况，scroll-view自适应页面残余高度

xml文件

<view class="box">  
    <view class="box-head"></view>
    <scroll-view class="box-scroll"></scroll-view>  
</view>

wxss文件

.box {
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
}
.box-head {
    flex-shrink: 0;
    height: 50px;
}
.box-scroll {
    flex: 1;
    height: 1px;
}

flex：1 高度仍然不会自适应加一个默认高度1px就能够自适应了

通用组件化解决

list.wxml

<scroll-view
    class="list-scroll {{ autoHeight ? 'list-scroll--auto' : '' }}"
    scroll-y
    enable-back-to-top
    bind:scrolltolower="scrolltolower"
>
    <slot></slot>

    <!-- 加载实现 -->
    <view wx:if="{{ finished }}" class="list-loading">
        <view class="list-loading__text">{{ finishedText }}</view>
    </view>

    <!-- 加载成果 -->
    <view wx:elif="{{ loading }}" class="list-loading">
        <van-loading type="spinner" size="20"></van-loading>
    </view>
</scroll-view>

list.scss(需编译成list.wxss)

.list {
    &-scroll {
        flex: 1;
        height: 100vh;

        &--auto {
            height: 1px;
        }
    }

    &-loading {
        margin: 10px 0;
        text-align: center;

        &__text {
            font-size: 16px;
            color: #a6a6a6;
            line-height: 1;
        }
    }
}

list.js

// components/list/list.js
Component({
    externalClasses: ["class"],
    options: {
        virtualHost: true, // 组件虚拟化
    },

    /**
     * 组件的属性列表
     */
    properties: {
        // 加载状态
        loading: {
            type: Boolean,
            value: false,
        },
        // 加载实现
        finished: {
            type: Boolean,
            value: false,
        },
        // 加载实现文字
        finishedText: {
            type: String,
            value: "没有更多了",
        },
        // 主动初始化获取数据
        autoInit: {
            type: Boolean,
            value: true,
        },
        // flex自定适应高度
        autoHeight: {
            type: Boolean,
            value: false,
        },
    },

    /**
     * 组件的办法列表
     */
    methods: {
        /**
         * 滚动到底部阈值
         */
        scrolltolower() {
            // 退出执行
            if (
                this.data.emptyText || // 没有数据
                this.data.loading || // 正在加载
                this.data.finished // 加载实现
            ) {
                return;
            }

            this.setData({
                loading: true,
            });
            this.triggerEvent("load");
        },
    },

    /**
     * 组件申明周期
     */
    lifetimes: {
        attached() {
            // 主动初始化
            if (this.data.autoInit) {
                this.scrolltolower();
            }
        },
    },
});

组件化后肯定要设置组件虚拟化。否则高度还是不会自适应

list.json

"component": true,
    "usingComponents": {
        "van-loading": "@vant/weapp/loading/index"
    }

须要装置van-loading或者本人写一个loading成果

应用

全屏

<com-list></com-list>

自适应

<com-list auto-height></com-list>