krimeshu opened a new issue #3097: [Android] Unexpected @appear when scrolling 
the page where weex version is 0.28.0
URL: https://github.com/apache/incubator-weex/issues/3097
 
 
   <!--
   Thanks for using Weex. Github Issue is only used for bur report and please 
follow the template to report the bug. 
   A good bug report should include the following information:
   -->
   
   <!-- Requirements: please go through this checklist before opening a new 
issue
     - * Review the documentation: https://weex.apache.org/index.html
     - * Search for existing issues: 
https://github.com/apache/incubator-weex/issues
     - * Use the latest Weex release: 
https://github.com/apache/incubator-weex/releases -->
   
   
   ## Describe the bug
   <!-- A clear and concise description of what the bug is. -->
   
   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
   <!-- Steps to reproduce the behavior.  Include a MCVE using 
http://dotwe.org/vue , crash stacktrace or  share your app project. Please 
follow the guidelines for providing a MCVE: https://stackoverflow.com/help/mcve 
-->
   
   Example page to reproduce it:
   
   ```html
   <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
   <!-- A clear and concise description of what you expected to happen. -->
   
   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.
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
[email protected]


With regards,
Apache Git Services

Reply via email to