01. 图片懒加载

uniapp图片懒加载

02. 分包

关于微信小程序分包

03. 骨架屏

小程序骨架屏

04. 分页

数据返回过多会造成页面很慢,接口最好做分页

下拉上拉插件

05. 页面优化代码

uniapp底部安全区域

/* 底部安全区域 */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

只给盒子顶部阴影

box-shadow: 0px -5px 10px -2px rgba(180, 180, 180, 0.3);

底部定位条

.footBox {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    position: fixed;
    bottom: 0;
    padding: 18rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 底部安全区域 */
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0px -5px 10px -2px rgba(180, 180, 180, 0.3);
  }

运行的时候注意勾选压缩代码,这个是很有用的

图片

06. 封装请求

uniapp 封装请求

07. 按钮防抖

function noMultipleClicks(methods, info) {
      // methods是需要点击后需要执行的函数, info是点击需要传的参数
      let that = this;
     if (that.noClick) {
          // 第一次点击
          that.noClick= false;
          if(info && info !== '') {
              // info是执行函数需要传的参数
             methods(info);
         } else {
             methods();
         }
         setTimeout(()=> {
             that.noClick= true;
         }, 2000)
     } else {
         // 这里是重复点击的判断
     uni.showToast({
       title:"手速有点快哦",
       icon:'none'
     })
     }
 }
 //导出
 export default {
     noMultipleClicks,//禁止多次点击
 }
Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐