移动端js总结

判断滚动条是否滚动到底部

// DOM元素



// 监听
const scrollDom = document.getElementById('scrollDom')
scrollDom.addEventListener('scroll', this.bindHandleScroll)

// 计算
const scrollDom = document.getElementById('scrollDom')
let scrollTop = scrollDom.scrollTop
let offsetHeight = scrollDom.offsetHeight
let scrollHeight = scrollDom.scrollHeight
var bottomFlag = scrollTop+offsetHeight == scrollHeight ? true : false
console.log('滑动到底了吗---',bottomFlag)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

滚动条判断不要用==，有个case只差了0.4px
也可以使用一个api IntersectionObserver API
注意：
移动端有底部安全距离：env(safe-area-inset-bottom)

body {
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}
1
2
3
4

图片url转base64

  urlToBase64 = (url)=> {
    return new Promise ((resolve,reject) => {
        let image = new Image();
        image.onload = function() {
            let canvas = document.createElement('canvas');
            canvas.width = this.naturalWidth;
            canvas.height = this.naturalHeight;
            canvas.getContext('2d').drawImage(image, 0, 0);
            let result = canvas.toDataURL('image/png')
            resolve(result);
        };
        // CORS 策略，会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
        image.setAttribute("crossOrigin",'Anonymous');
        image.src = url;
        image.onerror = () => {
            reject(new Error('转换失败'));
        };
    });
  }
  //使用
  this.urlToBase64(onlineBg).then(res=>{
     this.setState({base64BGurl:res})
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Lottie动画修改

//修改json文件内容
import acceptsuccess from '../json/suc2.json'
const asset1 = acceptsuccess.assets.find(a => a.id === 'image_2')
asset1.p = getImgUrl({id:inviteInfo?.myInfo?.avatar})
const asset2 = acceptsuccess.assets.find(a => a.id === 'image_1')
asset2.p = getImgUrl({id:inviteInfo?.fromMember?.avatar})

//给Lottie添加回调函数
 this.setState({showclose:true}),
      },
      {
        eventName:'DOMLoaded',
        callback:()=>{
          const element1 = document.getElementById("rightCpAvatar");
          const defsElementright = this.createDefElement('right')
          element1.appendChild(defsElementright);
          element1.querySelector("image").setAttribute('clip-path', 'url(#cut-off-bottom-right)');
          const element2 = document.getElementById("leftCpAvatar");
          const defsElementleft = this.createDefElement('left')
          element2.appendChild(defsElementleft);
          element2.querySelector("image").setAttribute('clip-path', 'url(#cut-off-bottom-left)');
        }
      }
    ]
  }
/>

//创建svg dom
//createElement会自动将标签名称改为小写，所以需要createElementNS创建
createDefElement = (str) => {
  const svgNs = "http://www.w3.org/2000/svg";
  const def = document.createElement会自动将标签名称改为小写，所以需要(svgNs, 'defs');
  const clipPath = document.createElementNS(svgNs, 'clipPath');
  const circle = document.createElementNS(svgNs, 'circle');

  clipPath.setAttribute('id', 'cut-off-bottom-'+str)
  circle.setAttribute('cx', 55)
  circle.setAttribute('cy', 55)
  circle.setAttribute('r', 55)
  clipPath.appendChild(circle);
  def.appendChild(clipPath)
  return def;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

Lottie加载带有image文件夹的json文件失败

• 查看是否图片路径问题
• 讲文件夹图片换成线上链接

实现点击别处消失

主要通过监听目标父级dom的mouseup事件实现
方法一：判断元素是否目标元素

//dom
 alertMouseup(e)}>
  

    {display: 'none'}}
      alt=""
    />
    

      啦啦啦啦。
    
  

//js
const alertMouseup = (e) => {
  const dom = document.getElementById('explainAlartBox')
  if (showAlert && e.target != dom && e.target.parentElement != dom) {
    setShowAlert(false)
    onCancel()
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

方法二：判断点击位置是否目标区域

//dom
 alertMouseup(e)}>
  

    {display: 'none'}}
      alt=""
    />
    

      啦啦啦啦。
    
  

//js
const alertMouseup = (e) => {
  const dom = document.getElementById('explainAlartBox')
    const rect = dom.getClientRects()
    if (
      e.clientX <= rect[0].x ||
      e.clientX >= rect[0].x + rect[0].width ||
      e.clientY <= rect[0].y ||
      e.clientY >= rect[0].y + rect[0].height
    ) {
      this.setState({showShareImg: false})
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

react事件流

react默认是冒泡事件，监听方法为onClick
要监听捕获事件则，监听方法为 onClickCapture
阻止默认事件：

if (e.stopPropagation) {
      e.stopPropagation()
    } else {
      e.cancelBubble = true //IE阻止冒泡方法
    }
    e.stopImmediatePropagation()
  }
1
2
3
4
5
6
7

双端兼容性问题

1. ios端 localStorage不能实时更新，需要退出重新页面才能拿到最新 localStorage的值
2. 安卓端不兼容2个API： toLocaleDateString replaceAll
3. iOS端打开包含中文的URL会白屏（浏览器和安卓正常），需要decode一下