uniapp中flex布局gap属性兼容处理

使用场景:

flex布局中的gap属性对于旧版本机型存在不适配问题

解决方案:
1.新建minins.scss

javascript 复制代码
/* mixins.scss */
@mixin flexGap($size, $direction) {
  @if $direction == column {
    & > * {
      margin-bottom: $size;
    }
    & > *:last-child {
      margin-bottom: 0;
    }
  } @else {
    & > * {
      margin-right: $size;
    }
    & > *:last-child {
      margin-right: 0;
    }
  }
}

/* mixins.scss */

2.uni.scss中引入minins.scss

javascript 复制代码
@import './common/mixins.scss';
相关推荐
学习3人组27 分钟前
Uniapp快速上手了解
uni-app
小鲤鱼ya1 小时前
vue3 + ts + uni-app 移动端封装图片上传添加水印
前端·typescript·uni-app·vue3
2501_915921431 小时前
常用iOS性能测试工具大全及使用指南
android·测试工具·ios·小程序·uni-app·cocoa·iphone
桐溪漂流1 小时前
Uni-app H5 环境下 ResizeObserver 监听 mp-html 动态高度
前端·uni-app·html
芒果大胖砸2 小时前
uniapp 在h5中预览pdf hybrid方法
pdf·uni-app
清音啊2 小时前
Uniapp 实现左滑显示操作按钮的列表(适配多端 + 实战案例)
uni-app
蜡台2 小时前
Uniapp 实现 二手车价格评估 功能
前端·javascript·uni-app·估值·汽车抵押·二手车评估
Muchen灬3 小时前
【uniapp】(4) tabbar配置
uni-app
万物得其道者成6 小时前
UniApp 与 H5 双向通信完整教程
uni-app
2501_9160074720 小时前
HTTPS 抓包的流程,代理抓包、设备数据线直连抓包、TCP 数据分析
网络协议·tcp/ip·ios·小程序·https·uni-app·iphone