uniapp对uni-row设置margin-top和padding-top在小程序上失效

最新推荐文章于 2024-12-03 12:13:07 发布

原创最新推荐文章于 2024-12-03 12:13:07 发布 · 4.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

本文探讨了uniapp中uni-row作为行内元素与view作为块级元素的区别。通过项目实践和查阅资料，发现uni-row的margin-top失效于微信小程序，原因在于行内元素的margin-top不生效。通过调整view的padding-top解决了问题，证实view的块级特性。关键点包括行内元素与块级元素的区别，以及在实际项目中的应用调整。

结论

uniapp中uni-row属于行内元素，view属于块级元素

项目中使用uni-row配合uni-col实现了一个包含picker的搜索框，同时对uni-row设置了margin-top。如图
在这里插入图片描述
在hbuilder上渲染后界面达到了预想的结果，但是后来移植到微信小程序后顶上的间距就消失了。

查到这篇文章说是由于“当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素，编辑器会把内层元素的margin-top作用与父元素”，同时提及了使用padding-top代替margin-top的方式，在尝试后仍然没有解决问题。

最终查到了这篇文章：给行内元素设置padding和margin是否有效

文章提及，对于行内元素来说，margin-left、margin-right、padding-left、padding-right有效，但margin-top、margin-bottom、padding-top、padding-bottom都无效，于是猜测uni-row属于行内元素。而对于块级元素，top、bottom、left、right设置都有效。

于是给uni-row内部的view元素设置margin-top、padding-top属性，成功解决问题，说明view属于块级元素，而uni-row属于行内元素。

刚开始写博客，表达可能不清楚，继续学习进步！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CHloe____

关注关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uni-app - 头像图片裁剪组件（支持多种裁剪，手势控制旋转或缩放、内外部控制图片移动、提供上传后端接口方案、头像图片美化）全端兼容H5网站、支付宝/微信小程序、安卓App、苹果App、nvue

🏆 前端领域优质创作者

11-08

1万+

uniapp，H5网页网站、支付宝/微信小程序、安卓App、苹果App、nvue，裁剪，官方图片上传裁剪并上传到后端组件，uni-app实现简单易用的头像裁剪上传组件，uniapp头像美化图片组件，uniapp如何实现图片上传后裁剪功能，裁剪图片，裁剪头像，uniapp头像裁剪带上传功能的组件，头像上传裁切剪切组件，uni-app实现图片的上传和裁剪，uni-app使用图片裁剪插件，uniApp实现选择图片裁剪设置用户头像，vueuni-app裁剪图片(裁剪头像)插件，uni-app实现上传图片裁剪效果

uniapp - [微信小程序] 详细动态设置分享转发时的参数，实现点击按钮元素后 “手动触发“ 动态设置参数并调起转发分享给好友（列表上每一个分享按钮，单独设置分享转发参数，每次都是不同的分享参数）

🏆 前端领域优质创作者

08-01

3427

uniapp小程序如何动态设置分享的配置参数，uniapp小程序分享功能怎么携带参数，uniapp微信小程序开发中怎么能动态带参数设置分享，uniapp小程序动态赋值onShareAppMessage里return的参数配置，uniapp微信小程序多个分享事件并带不同的参数，uniapp小程序分享转发时每次都带不同的参数，uniapp小程序一个列表中每个都带有分享功能怎么做，uni-app小程序平台端怎么动态的给分享功能设置不同的参数，uniapp微信小程序一个页面有多个分享怎么办，uniapp一个页面表格

参与评论您还未登录，请先登录后发表或查看评论

微信小程序 margin-top失效

leechoy

01-04

1439

给父级标签设置如下： overflow: hidden;

uni-app之flex布局教程 uniapp在线教程 uni app视频教程

04-17

讲解uni-app中如何使用flex的布局，uni-app中原生界面开发必学技能讲解了flex的容器属性讲解了flex的项目属性

uni-app学习：CSS之padding

sziitjin的博客

07-15

4546

padding : +数值+单位或百分比数值 div{padding:5px}设置对象距离四边边距为5px间隔同时可以单独设置左、右、上、下边距离发布设置 1、padding-left 设置对象距离左边的边距补白间隔 div{padding-left:5px} 对象内距离左边补白间距为5px 2、padding-right 设置对象距离右边的边距补白间隔 div{padding-right:5px} 对象内距离右边补白间距为5px 3、padding-top 设置对象距离上边的边距补白间隔.

问题：uniApp 开发中使用 padding: 0 10px，右内边距不起作用

虎康的博客

10-16

805

如图所示，给该 view 设置了padding: 0 10px，但右内边距不起作用。

微信小程序view设置margin-top和margin-button无效的解决方案

qq_46170459的博客

02-13

2539

微信小程序view设置margin-top和margin-button无效的解决方案。

margin-bottom、margin-top设置不起效

qq_44792224的博客

11-08

1442

如下，在uniapp项目中使用了tag标签，设置margin时，只有margin-left、margin-right生效，margin-bottom、margin-top设置不起效。f12直接在元素中修改也无效。

uniapp：uni-combox下拉选中之后下拉框只有被选中项问题解决

皮皮虾的博客

03-25

8343

关于uni-combox的基础用法在此处不赘述，下面是官网上给出的示例：选中之后必须手动清空了输入框内容才可以再次选择其他选项，非常不方便去插件市场看了下有基于uniui实现的，突发奇想，我们也可以自己改呀~ 查看uni-combox的组件，修改原代码。实现效果如下：如果对下拉选择功能要求不是很多的，可以采用以下代码（复制直接替换掉uni-combox.vue的代码）： <template> <view class="uni-combox"> <view v

前端框架-小程序uniApp

aming小老弟

12-03

1494

获取集合Collection示例如下。nosql 非关系型数据库。

解决uni-app官方弹框popup关闭不了问题；/pages/extUI/popup/popup；uni-app弹框popup打开调用事件。unin-app弹框封装；

i_am_a_div的博客

07-16

1万+

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210716165216781.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY=,size_16,color_FFFFFF,t_70) 官方uni-app的弹框popup模板问题: 官方的弹框示例页面在 /pages/extUI/pop

uniapp组件-uni-row/col 布局

热门推荐

03-03

1万+

目录一、基础布局二、混合布局三、分栏偏移（offset、pull、push）四、响应式布局流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局 gutter属性表示间隔一、基础布局使用单一分栏创建基础的栅格布局 <template> <view> <uni-row style="margin-bottom: 10px;"> <uni-col><view class="demo-uni-co.

uni-app margin失效解决方案

xuelang532777032的博客

01-31

2366

2、也有说iphone才会这样，博主试过了非iphone margin-top和margin-bottom也是不生效的如下图，比如第二张图。1、弄了半天，发现margin一直不出来，博主也百度了，发现好像嵌个view在外侧没有意义，结构看起来会太浮肿，比如第一张图。你会发现背景是灰色的，但是两个表格还是连在一起的白色（如果margin生效应该是两个图标中级是灰色不是白色）加个width:100%;目前还没出现啥问题，你们试，如果有兼容问题在跟我说下，我真机试是没有问题。但是右边会多出来一块，

uni-app 的 scroll-view 横向滚动右边距不生效

UserGuan的博客

03-08

1939

原因：因为 class 为 bodyBox 的子元素(view)的宽度和 scroll-view 是一致的，所以设置成 display:flex;是不管用的(即：scroll-view 并没有溢出，所以 padding 不起作用)缺点是滑动时有滚动条出现，需要手动用 css 去除滚动条。在 scroll-view 的子元素内使用。不使用 scroll-view 改为。

微信小程序中直接给text标签加margin-top或padding-top不起作用

zdz的博客

11-28

1535

微信小程序中直接给text标签加margin-top或padding-top不起作用，如下图。 it’s amazing！！！把text标签替换成view就可以了。

padding-top或margin-top 失效

weixin_30649641的博客

02-18

318

经常会遇到Firefox下 margin-top这失效的问题在css2.1中，水平的margin不会被折叠。垂直margin可能在一些盒模型中被折叠：采取清除浮动的方法可以解决转载于:https://www.cnblogs.com/JohnFeller/articles/1669187.html...

[css]margin-top不起作用问题（外边距合并）

qq_22744093的博客

07-31

1760

第一个段落上面的空间等于段落的上外边距。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。：两个嵌套关系的（父子关系）块元素，当父元素有上外边距或者没有上外边距（margin-top），子元素也是有上外边距的时候。2、给每个元素添加父元素，将外边距合并问题转化为外边距塌陷问题，然后用解决外边距塌陷问题办法去解决，这样就完美解决问题。根据以上代码推测，理想的状态下应该是outer元素外边距top是0,inner元素相对outer有一个20px的外边距top:20px。

微信小程序遇到margin-top无效的解决方法

qq_37107602的博客

10-23

448

如果你的代码格式类似这样。

小程序中maring-top、maring-left、maring-right、maring-bottom失效/没有用的原因及解决方案

Z_hongli的博客

11-20

762

小程序中maring-top、maring-left、maring-right、maring-bottom失效/没有用的原因及解决方案我在做小程序的时候经常遇到这种情况，明明是设置好了maring-top的值，但是却并不管用必看后来我尝试在没起作用的地方加一个display：flex 我的想法是我的这个text所在的view容器是flex布局，所以我去用flex布局试试，没想到就成功了对此还有些其它的猜想，如果父容器view或者其它类型的容器，他的布局不是display：flex，而是其它类型，而

uni-app使用u-table 滑动某一列展示编辑或删除功能

最新发布

09-29

<think>首先，用户的问题是：在uni-app中使用u-table实现滑动某一列展示编辑或删除功能的方法。我需要参考提供的引用，并基于我的知识给出回答。回顾提供的引用： - 引用[1]：关于uni-app自定义表格插件，提到了冻结列和渲染数据。 - 引用[2]：解决uni-table在app端无法横向滚动的问题，涉及配置文件。 - 引用[3]：滑动菜单效果，可以点击或滑动切换tab。 - 引用[4]：uni-table组件表头固定使用position: sticky的注意事项。用户的问题是关于实现滑动某一列展示编辑或删除功能，类似于移动端常见的左滑出现操作按钮的功能。在uni-app中，u-table可能指的是某个特定的插件或组件。根据引用，uni-app有自己的uni-table组件，但可能需要自定义来实现滑动功能。引用[1]中提到用户自己撸了一个table插件，因为它不满意其他插件；引用[3]讨论了滑动菜单效果，这相关。关键点： - 实现滑动功能通常涉及到监听touch事件或使用swiper组件。 - 在表格中，滑动某一列意味着在表格行上添加滑动事件，当滑动时，显示隐藏的编辑和删除按钮。标准方法： 1. 使用uni-app的event handlers来处理touch事件。 2. 利用CSS来控制按钮的显示和隐藏。 3. 或者使用第三方插件或自定义组件。参考引用： - 引用[3]提到了swiper组件用于滑动切换tab，这可以适配到表格行中的滑动。 - 引用[4]讨论了position: sticky，但那是针对表头固定的，可能不直接相关，但提示了CSS注意事项。步骤实现： - 对于每个表格行，添加一个容器，包含内容区和隐藏的操作按钮区。 - 使用touchstart、touchmove和touchend事件来检测滑动距离。 - 当滑动超过一定阈值时，显示操作按钮。 - 使用CSS设置初始隐藏，滑动时显示。代码示例：由于用户提到u-table，我假设使用的是uni-app的官方或常用插件。但uni-app的标准表格组件没有内置滑动功能，可能需要自定义行。根据引用[1]，用户自定义了table，所以我会建议自定义组件。在我的回答中： - 结构清晰，逐步解决问题。 - 使用中文。 - 确保LaTeX正确：用户的问题没有数学内容，所以可能不需要。 - 添加引用标识：基于提供的引用。 - 生成相关问题。回答结构： 1. 解释问题：在uni-app中实现表格行滑动显示操作按钮。 2. 推荐方法：自定义表格行组件来处理滑动事件。 3. 步骤： - 创建自定义的行组件。 - 在行组件中使用视图层实现滑动。 - 添加事件处理。 - CSS样式。 4. 代码示例：提供uni-app代码片段。 5. 注意事项：基于引用[2]，检查滚动配置；基于引用[4]，注意overflow设置。 6. 生成相关问题。生成相关问题： - 如何优化uni-app中的表格性能？ - 如何实现多个滑动操作？ - 如何处理表格数据绑定？现在，编写回答。 </think>### uni-app中使用u-table实现滑动某一列展示编辑或删除功能的方法在uni-app中，u-table（常见于uni-app插件市场的表格组件）并不原生支持滑动列显示操作按钮的功能，需要通过自定义组件结合事件监听实现。参考提供的引用和uni-app最佳实践，我将分步说明实现方法。关键在于使用touch事件监听滑动行为，配合CSS控制操作按钮的显示。以下是详细步骤和代码示例： #### 步骤1: 自定义表格行组件，添加滑动容器首先，创建一个自定义行组件（如`slide-row.vue`），包裹表格行内容，并添加隐藏的操作按钮区。参考引用[3]的思路，使用`swiper`或手动事件监听滑动： - **滑动容器结构**：每个表格行使用一个外层`view`，包含内容区和操作按钮区。操作按钮区初始隐藏，滑动时显示。 - **CSS关键点**：确保父容器未设置`overflow: hidden`（如引用[4]所述，否则滑动失效），使用`position: relative`和`transform`实现平滑动画。 ```vue  <template> <view class="slide-container" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">  <view class="content"> <text>{{ rowData.name }}</text>  </view>  <view class="action-buttons" :style="{ transform: `translateX(${translateX}px)` }"> <button @click="handleEdit">编辑</button> <button @click="handleDelete">删除</button> </view> </view> </template> <script> export default { props: ['rowData'], // 接收行数据 data() { return { startX: 0, // 触摸起始位置 currentX: 0, // 当前滑动位置 translateX: 0, // 按钮区偏移量 }; }, methods: { handleTouchStart(e) { this.startX = e.touches[0].clientX; // 记录起始点X坐标 }, handleTouchMove(e) { this.currentX = e.touches[0].clientX; const diffX = this.startX - this.currentX; // 计算滑动距离 if (diffX > 0) { // 仅左滑有效 this.translateX = -Math.min(diffX, 150); // 限制最大滑动距离（150px为按钮区宽度） } }, handleTouchEnd() { // 滑动结束后，判断是否显示按钮 if (this.translateX < -70) { // 阈值：滑动超70px则完全显示 this.translateX = -150; } else { this.translateX = 0; // 否则复位 } }, handleEdit() { uni.showToast({ title: '编辑: ' + this.rowData.id }); }, handleDelete() { uni.showToast({ title: '删除: ' + this.rowData.id }); } } }; </script> <style scoped> .slide-container { position: relative; display: flex; width: 100%; overflow: hidden; /* 确保内容可滚动（参考引用[2][^2]） */ } .content { flex: 1; padding: 10px; background: #fff; z-index: 1; /* 确保内容在按钮上方 */ } .action-buttons { position: absolute; right: 0; top: 0; height: 100%; width: 150px; /* 按钮区宽度 */ display: flex; background: #f0f0f0; transition: transform 0.3s ease; /* 平滑动画 */ } button { flex: 1; margin: 0 5px; height: 100%; } </style> ``` #### 步骤2: 在u-table中集成自定义行在页面中使用u-table插件（如uni-table或第三方表格），将自定义行组件作为slot传入： - **关键点**：引用[1]提到通过批量渲染和数据遍历优化性能[^1]，这里绑定行数据。 - **配置检查**：确保路由未设置`disableScroll: true`（如引用[2]所述，否则滑动失效[^2]）。 ```vue  <template> <view> <uni-table :data="tableData"> <template #default="{ row }"> <slide-row :row-data="row" />  </template> </uni-table> </view> </template> <script> import SlideRow from '@/components/slide-row.vue'; // 导入自定义组件 export default { components: { SlideRow }, data() { return { tableData: [ { id: 1, name: '行1' }, { id: 2, name: '行2' }, // 示例数据 ] }; } }; </script> ``` #### 步骤3: 注意事项与优化 1. **滑动冲突处理**： - 如果表格整体需横向滚动（如在app端），参考引用[2]，检查`page.json`确保未禁用滚动[^2]。 - 添加`@touchmove.prevent`到内容区，避免滑动操作时触发页面滚动。 2. **性能优化**： - 对于大型表格，参考引用[1]的批量渲染思路[^1]，使用`v-for`时添加`:key`。 - 避免频繁DOM操作，滑动事件中节流计算。 3. **兼容性**： - 在iOS/Android测试，确保touch事件响应一致。可使用uni-app的`uni.$on`全局事件管理多行状态（避免同时滑动多行）。 #### 备选方案：使用第三方插件如果自定义复杂，插件市场有支持滑动的表格插件（如引用[1]提到的冻结列插件[^1]），但需注意： - 修改插件源码添加滑动事件，或寻找带操作槽的插件（如`uni-tr`组件的自定义slot）。通过以上方法，您可以在uni-app中实现类似“左滑显示编辑/删除”的功能。如需完整示例项目，可参考uni-app插件市场相关demo[^1][^3]。