[Android] Unexpected @appear when scrolling the page where weex version is 0.28.0

[krimeshu]

Describe the bug

When list scroll into view, the @appear callback didn't be called, on Android devices.

It works well on iOS and Web mode.

To Reproduce

Example page to reproduce it:

<style scoped>
    .page-box {
        flex: 1;
        overflow: hidden;
    }

    .info-box {
        height: 300px;
        background-color: #717171;
        padding: 12px 6px;
    }

    .info-text {
        color: #fff;
        font-size: 24px;
    }

    .content-box {
        flex: 1;
    }

    .blue-block, .red-block {
        margin-left: 25px;
        width: 100px;
        height: 100px;
    }

    .blue-block {
        background-color: blue;
    }

    .red-block {
        background-color: red;
    }
</style>

<template>
    <div class="page-box">
        <scroller class="info-box">
            <list>
                <cell v-for="item in infoList"
                      :key="item.key">
                    <text class="info-text">{{item.text}}</text>
                </cell>
            </list>
        </scroller>
        <scroller class="content-box">
            <div style="height: 1800px; padding-top: 100px; background-color: #fdce17;">
                <text style="text-align: center;">Come on, pan up the page!</text>
            </div>
            <scroller scroll-direction="horizontal"
                      style="width: 750px; height: 100px; flex-direction: row;"
                      @appear="log('* list @appear')" @disappear="log('* list @disappear')">
                <div style="flex-direction: row;">
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                    <text>Drag me to left.</text>
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                    <div @appear="log('* red block @appear')" @disappear="log('* red block @disappear')"
                         class="red-block"></div>
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                    <div class="blue-block"></div>
                </div>
            </scroller>
            <div style="height: 1800px; background-color: #fdce17;"></div>
        </scroller>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                infoList: [],
            };
        },
        methods: {
            log(str) {
                const info = {
                    key: new Date().getTime(),
                    text: str,
                };
                this.infoList.unshift(info);
            },
        },
        created() {
            this.log('Page created.');
        },
    };
</script>

Pan the page and block list, and check the log info on the top area.

Environment

• Device: Android Phone
• OS: Android OS
• Version: 9
• Build from source: yes

Expected behavior

When the list appear in screen, log ' list @appear', and log ' list @disappear' when it disappear.

The same to the red block in the list.

[krimeshu]

This problem does not show on iOS device.

Could you please compare the check the @appear between Android and iOS?

[YorkShen]

You're using appear in a horizonal scroller, that could be a problem.

[krimeshu]

You're using appear in a horizonal scroller, that could be a problem.

But it's not problem on iOS.

And the vertical scroller's @appear not working, too.

[YorkShen]

There are some different behaviour bentween iOS and Andorid, you can improve Weex Document to help us.