1 Problems related to scroll view

A scrollwith-animation will make iphone6 unable to scroll — wechat native bug

Two monitor slide ends

  • Scroll end event wechat bindDragEnd
  • Alipay only provides the slider end event onTouchEnd, to listen to the end of the scroll currently need to listen to the timer scrollTop
  • The above two events will not be triggered in the three-terminal emulator and must be real

3 platform-specific methods can add @ali @wx, such as onTouchEnd@ali, (onTouchEnd does not add @ali will cause an error on the Web side)

Add updateRefresh to convert web

(Converting web requires adding updateRefresh attributes added for converting Web which are not found in official documents of wechat and Alipay)

Effect without addition 👇

Add effect 👇

When converting web-dependent better-scroll, the height of mx-scroll-view-content will be calculated according to the content size. When dynamically filling content, the content width and height need to be updated in real time

Five scrollView examples 🌰

 <scroll-view
  class="safe-column-detail"
  scroll-y="{{true}}"
  enhanced="{{true}}"
  bounces="{{false}}"
  binddragging="binddragging"
  onTouchEnd@ali="scrollTouchEnd"
  bindscroll="throttleDindscroll"
  binddragend="binddragend"
  updateRefresh="{{true}}"
  scroll-top="{{scrollTop}}"
  wx:ref="scrollView"
  id="scrollViewid">
  
Copy the code

$ref = dom

WeChat native

const query = wx.createSelectorQuery() query.select('#the-id').boundingClientRect(function(res){ res.top // #the-id Query.selectviewport ().scrolloffSet (function(res){res.scrolltop // Vertical scrolling position of display area}) query.exec()Copy the code

MPX documentation is provided

This.$refs.test.fields({size: true}, function (res) {}).exec()Copy the code

Alipay (document not provided, differences to be smoothed)

 this.$refs[ref].boundingClientRect();
          this.$refs[ref].exec(function (res: any) {
            resolve(res[0]);
          });
Copy the code

3 android6 white screen + Unexpected token […

MPX’s built-in Poillfy is invalid instead

{
  "presets": [
    [
      "@babel/env",
      {
        "useBuiltIns": "entry",
        "corejs": {
          "version": 3,
          "proposals": true
        }
      }
    ]
   ]
}
Copy the code

And join in app.ts

import 'core-js/stable';
import 'regenerator-runtime/runtime';
Copy the code

4 Default page height of Alipay mini program

WeChat

page {
    height: 100%;
}
Copy the code

web

.page {
    height: 100%;
}
Copy the code

Alipay

.scroll-nav-wraper-ali {
    height: 100vh;
}
Copy the code

5 .TBC…