移动端常见优化集锦

最新推荐文章于 2025-06-14 22:34:18 发布

星辰啊大海7857

最新推荐文章于 2025-06-14 22:34:18 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

分类专栏：项目搭建遇到的bug

本文链接：https://blog.csdn.net/weixin_39107711/article/details/108230115

项目搭建遇到的bug 专栏收录该内容

5 篇文章

订阅专栏

本文探讨了移动端页面设计中常见的橡皮筋效果问题及解决方案，通过阻止touchmove事件改善用户体验。同时，深入介绍了微信开发中隐藏复制和分享按钮的方法，包括使用WeixinJSBridge API的实践与注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、移动端列表页面，含有header和footer，中间content内容比较多的时候，

手指滑动页面，会发现地步固定的footer也会随着滑动移动，导致我滑一下停一下，

或者手指长按页面小心拖动，能拖动一个页面。

这个有个转悠描述：橡皮筋效果

阻止touchmove事件，可以参考知乎的回答。

2、微信开发，隐藏复制按钮以及分享按钮，文档

写法一：（参考这里和这里）

function onBridgeReady(){
    //隐藏分享
    WeixinJSBridge.call('hideOptionMenu');
//============
    setTimeout(function() {
      //这个可以关闭安卓系统的手机
      document.addEventListener(
          "WeixinJSBridgeReady",
          function() {
             WeixinJSBridge.call("closeWindow");
          },
         false
       );
    //这个可以关闭ios系统的手机
   WeixinJSBridge.call("closeWindow");
}
if (typeof WeixinJSBridge == "undefined"){
   if( document.addEventListener ){
       document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
   }else if (document.attachEvent){
       document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
       document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
   }
}else{
   onBridgeReady();
}

这个写法是有缺陷的：（vue项目）

ios手机没有问题，

安卓手机第一次进入页面需要刷新才会起作用，切换到其他页面也需要刷新；如果退出网页重新进入，没有缓存也需要刷新才会起作用；

或者会出现只有首页起作用，跳转router之后的页面就不行了。

灵感解决：