1 scroll-view 相关问题

一 scroll-with-animation 会使iphone6 无法滚动 -微信原生bug

二 监听滑动结束

• 滚动结束事件微信binddragend
• 支付宝仅提供了滑动结束事件onTouchEnd，想要监听滚动结束目前需要定时器监听scrolltop
• 以上两个事件在三端模拟器均不会触发，必须真机

三 平台特有方法可以加@ali @wx, 如onTouchEnd@ali，（onTouchEnd不加@ali 会在web端报错）

四 转换web需要添加updateRefresh

（转换web需要添加updateRefresh为转换web添加的属性 微信和支付宝官方文档都没有的属性）

不加的效果👇

加的效果👇

转换web依赖的better-scroll，会根据内容大小计算mpx-scroll-view-content高度，当动态填充内容时需要实时更新内容宽高

五 scrollview样例🌰

 <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">
  

2 $ref获取方式dom

微信原生

const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect(function(res){
  res.top // #the-id 节点的上边界坐标（相对于显示区域）
})
query.selectViewport().scrollOffset(function(res){
  res.scrollTop // 显示区域的竖直滚动位置
})
query.exec()

mpx文档提供

  this.$refs.test.fields({size: true}, function (res) {
        // 此处拿到的 res 是一个数组，包含了列表渲染中的所有节点的大小信息
      }).exec()

支付宝（文档未提供，待磨平差异）

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

3 android6 白屏+ Unexpected token [...

mpx自带的 poillfy 无效 改为

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

并在app.ts 加入

import 'core-js/stable';
import 'regenerator-runtime/runtime';

4 支付宝小程序默认page高度

微信

page {
    height: 100%;
}

web

.page {
    height: 100%;
}

支付宝

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

5 .TBC...