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';
相关推荐
骨子里的偏爱16 小时前
uniapp实现数据存储到本地文件,除非卸载app,否则数据一直存在
javascript·chrome·uni-app
_Jyann_19 小时前
uniapp两种方式实现自定义tabbar
前端·javascript·uni-app
郑州光合科技余经理19 小时前
PHP技术栈:上门系统海外版开发与源码解析
java·开发语言·javascript·git·uni-app·php·uniapp
2501_9159214319 小时前
Fiddler抓包工具详解,HTTPHTTPS调试、代理配置与接口分析实战教程
服务器·ios·小程序·fiddler·uni-app·php·webview
undsky20 小时前
【RuoYi-SpringBoot3-UniApp】:一套代码,多端运行的移动端开发方案
前端·uni-app
diygwcom20 小时前
UniApp 鸿蒙NEXT蓝牙连接及数据写入
华为·uni-app·harmonyos
00后程序员张20 小时前
数据流抓包实战指南,TCPUDP 流量分析、HTTPS 解密与多工具协同方案
网络协议·http·ios·小程序·https·uni-app·iphone
2501_9159214321 小时前
iOS 性能分析工具全景解析,构建从底层诊断到真机监控的多层级性能分析体系
android·ios·小程序·https·uni-app·iphone·webview
2501_9159090621 小时前
如何防止 IPA 被反编译,从攻防视角构建一套真正有效的 iOS 成品保护体系
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_9160074721 小时前
专业的 IPA 处理工具 构建可维护、可回滚的 iOS 成品加工与加固流水线
android·ios·小程序·https·uni-app·iphone·webview