移动端常见问题

以下是一些常见的移动端开发问题：

响应式设计：如何确保应用程序在不同的屏幕尺寸下都能良好地显示和交互？

移动端

h5底部输入框被键盘遮挡问题

给body设置css属性：overflow: hidden;
给body设置css属性：padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);

  var getHeight = $(document).height();

  $(window).resize(function(){
   if($(document).height() < getHeight) {
    $('#footer').css('position','static');
   }else {
    $('#footer').css('position','absolute');
   }
  });

弹窗时禁止背景滚动

export function stopBodyScroll(isFixed){
 let wrapper document.querySelector("#app");
 if (isFixed)
  const query= Taro.createSelectorQuery()
  query.select('#app').boundingclientRect(rec =>
  scrollTop= rec.top 
  // 在使用弹窗前记录当前位置，设置距离顶部的高度
  wrapper.style.position= "fixed";
  wrapper.style.top= scrollTop;
  wrapper.style.bottom =0;
  wrapper.style.left =0;
  wrapper.style.right=0;
  wrapper.style.overflow= "hidden";
  })exec()
 }else{
  wrapper.style.position= "static";
  wrapper.style.top ="unset";
  wrapper.style.bottom ="unset";
  wrapper.style.left ="unset";
  wrapper.style.right ="unset";
  wrapper.style.overflow ="auto";
  window.scrollTo(0,-scrollTop);
  // 重置属性，滑动到记录的参数位置
 }
}

taro弹窗组件列表排序

在taro 3.x版本的时候遇到过一个问题，就是在弹窗组件包裹一个下滑列表加载，在加载新数据的时候，会出现列表的排序错乱。解决问题的最简单方法就是在列表最外层加个<view></view>标签包裹。这个核react要一个最外层标签包裹是一样的，在算法diff的时候计算错误。