关于小程序吞噬margin-rightBug

关于小程序吞噬margin-right的Bug

今天在写小程序的时候发现我在flex布局的时候我的margin-right不生效 经过测试只能使用display:inline-block; 配合 white-space: nowrap;来实现flex布局同时也解决了不显示右边距的问题

复盘:在小程序中有一个横向滚动的 需求 滚动的屏幕的边缘以后在不显示图片

实现的思路:让该横向滚动的列表宽度为屏幕的实际宽度由于我设置了所有的内容都有一个左右边距为30rpx所以在设置完宽度为屏幕实际宽的时候还是有边距 所以需要来个反向输出 我设置的是所有内容为padding 左右30rpx 内容如果想占到边距就需要来个margin-left:-30rpx 有了边距以后 在给每个item来个30rpx就有边距了

第一步获取屏幕的实际宽度 使用wx.getsysyteminfo方法来获取

第二步改变横向滚动的宽度为屏幕实际宽度 直接从data中拿到我们获取的宽度就行

第三步给给滚动的列表的父元素来个margin-left:-30rpx让他实际沾满屏幕宽度

第四步 给每个滚动的元素来个左右边距30rpx这样就是元素占据的边距所以滚动是可以覆盖的

第五步改变思维 由于我们是flex布局右边距微信不给我生效所以改变方案使用display:inline-block; 配合 white-space: nowrap;来实现flex布局

注意事项: white-space: nowrap;会继承到文字上所以我们需要给文字来个 white-space: nomal; 结束

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/644055.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

良心推荐!五个超好用的Vue3工具

vue3-dnd 是用来做drag and drop的,也就是拖放,很多人多 Vue 的拖放库已经断代了,其实 Vue3 也有拖放库的,那就是 vue3-dnd。 v-wave 这可库可以通过自定义指令的形式,让目标点击节点具备波纹的效果,如下…

React 18版本配置rem 和 vw

React 18版本配置rem 和 vw 经过无数次的实验最终发现兼容性比较好的方案是配置webpack.config.js 第一步: npm install lib-flexible postcss-pxtorem yarn add lib-flexible postcss-pxtorem第二步: 接下来直接解包-- yarn eject npm run eject第三步: 这一步也是最关键…

mysql的varchar长度到底能插多少字符?

在用navicat迁移表结构,从oracle到MySQL时,注意如下坑: 1、如果varchar2(256)以上,则在mysql会自动用text取代,需要考虑手工修改字段类型为varchar(256) ALTER TABLE DES_LOGIC_RESOURCE MODIFY REMARK VARCHAR(4000);…

MySQL两个表的亲密接触-连接查询的原理

MySQL对于被驱动表的关联字段没索引的关联查询,一般都会使用 BNL 算法。如果有索引一般选择 NLJ 算法,有 索引的情况下 NLJ 算法比 BNL算法性能更高。 关系型数据库还有一个重要的概念:Join(连接)。使用Join有好处&…

学会使用ubuntu——ubuntu22.04使用WebCatlog

Ubuntu22.04使用WebCatlog WebCatlog是适用于Gnu / Linux,Windows或Mac OS X系统的桌面程序。 引擎基于铬,它用于在我们的桌面上处理Web服务。简单点就是把网页单独一个窗口出来显示,当一个app用。本文就是利用WebCatlog安装后的notion编写的…

如何学习计算机视觉

学习计算机视觉可以通过以下步骤进行: 了解基本概念和原理:首先,你可以学习计算机视觉的基本概念和原理,包括图像处理、特征提取、目标检测、物体识别等。这些基础知识将帮助你理解计算机视觉的工作原理。 学习算法和技术&#x…

C语言-算法-快速幂

【模板】快速幂 题目描述 给你三个整数 a , b , p a,b,p a,b,p,求 a b m o d p a^b \bmod p abmodp。 输入格式 输入只有一行三个整数,分别代表 a , b , p a,b,p a,b,p。 输出格式 输出一行一个字符串 a^b mod ps,其中 a , b , p a…

第九篇 华为云Iot SDK的简单应用

第九篇 华为云Iot SDK的简单应用 一、华为云Iot SDK API的简单使用 1.初始化SDK 2.绑定连接配置信息 3.连接服务器 4.上报属性 5.接收命令 二、实现智能家居灯光状态上报 🔖以下是上报数据到华为云Iot的代码片段,配合串口控制灯光,改变灯…

Qt —— 自定义飞机仪表控件(附源码)

示例效果 部署环境 本人亲测版本Vs2017+Qt5.12.4,其他版本应该也可使用。 源码1 qfi_ADI::qfi_ADI( QWidget *parent ) :QGraphicsView ( parent ),m_scene ( nullptr )

C++ STL之list的使用及模拟实现

文章目录 1. 介绍2. list类的使用2.1 list类对象的构造函数2.2 list类对象的容量操作2.3 list类对象的修改操作2.4 list类对象的访问及遍历操作 3. list类的模拟实现 1. 介绍 英文解释: 也就是说: list是可以在常数范围内在任意位置进行插入和删除的序列…

yolov8 opencv dnn部署自己的模型

源码地址 本人使用的opencv c github代码,代码作者非本人 使用github源码结合自己导出的onnx模型推理自己的视频 推理条件 windows 10 Visual Studio 2019 Nvidia GeForce GTX 1070 opencv4.7.0 (opencv4.5.5在别的地方看到不支持yolov8的推理,所以只使用opencv…

【机组】计算机组成原理实验指导书.

​🌈个人主页:Sarapines Programmer🔥 系列专栏:《机组 | 模块单元实验》⏰诗赋清音:云生高巅梦远游, 星光点缀碧海愁。 山川深邃情难晤, 剑气凌云志自修。 ​ 目录 第一章 性能特点 1.1 系…

使用js判断list中是否含有某个字符串,存在则删除,

显示上图中使用了两种方式, 左边的是filter将不等于userCode的元素筛选出来组成一个新的list, userCodeList.filter(item> item!userCode);但是上面这个方法在IE浏览器中不支持, 所以改成了右边的方法,使用splice…

《WebKit 技术内幕》学习之十一(1):多媒体

第11章 多媒体 说到浏览器对多媒体的支持,不得不提的就是Flash插件和HTML5之争。Flash对Web的发展起了非常重要的作用,它能够支持视频、音频、动画等多媒体功能,虽然现在大家都在讨论Web前端领域是否应该丢弃Flash插件转而支持HTML5。在本章…

web系统架构基于springCloud的各技术栈

博主目前开发的web系统架构是基于springCloud的一套微服务架构。 使用的技术栈:springbootmysqlclickhousepostgresqlredisrocketMqosseurekabase-gatewayapollodockernginxvue的一套web架构。 一、springboot3.0 特性:Spring Boot 3.0提供了许多新特性…

第十七章 : Spring Cloud中分布式锁理论与实践(一)

第十七章 : Spring Cloud中分布式锁理论与实践(一) 本章知识点:分布式锁诞生的背景、设计思路以及单机JVM锁在集群的情况存在的缺陷以及讲解了MySQL分布式锁设计方案以及落地思路。 Springboot 2.3.12.RELEASE,spring cloud Hoxton.SR12,spring cloud alibaba 2.2.9.RELE…

网络安全---防御保护--子接口小实验

子接口小实验: 环境准备: 防火墙区域配置为trust: PC设置其ip为同一个网段: 此时尝试ping无法ping通的原因是没有打开防火墙允许ping,我们在图形化界面允许ping即可 最终结果: .com域名服务器: …

​比特币大跌的 2 个原因

撰文:秦晋 原文来自Techub News:​比特币大跌的 2 个原因 比特币迎来大跌!1 月 23 日凌晨,比特币跌破 40000 美元,为去年 12 月 4 日以来首次,日内跌超 3%。这是自 1 月 10 日美国证监会审批通过 11 只比…

C# 实现IUnknown接口(2)

IUnKnown接口定义 [ComImport(), InterfaceType(ComInterfaceType.InterfaceIsIUnknown),Guid("00000000-0000-0000-C000-000000000046")]public interface IUnknown{[PreserveSig]int QueryInterface(ref Guid riid, out IntPtr ppvObject);[PreserveSig]uint AddR…

中仕教育:“三不限”事业编的含义

所谓“三不限”,是指在报考事业单位时,对考生的户籍、年龄、学历不作任何限制。所以全国各地的考生只要符合招聘条件,都可以报考。所以每一年的三不限岗位竞争压力都比较大,报考人数都有很多。 ‘三不限’岗位招考信息在哪里看?…