微信小程序原生自定义组件布局问题

问题复现

<view class="intro">欢迎使用代码片段，可在控制台查看代码片段的说明和文档<view class="flex-box"><!-- avatar自定义组件内容：<view class="avatar"></view> ---><avatar></avatar><avatar></avatar><avatar></avatar></view><view class="flex-box"><view class="avatar"></view><view class="avatar"></view><view class="avatar"></view></view>
</view>

.flex-box{display: flex;justify-content: center;
}
/* 自定义组件的样式隔离设置为apply-shared，使其样式能够受到外部组件影响 */
.avatar{width: 20%;height: 100px;margin: 5px;background-color: red;
}
.avatar:nth-child(2n){width: 20%;height: 100px;margin: 5px;background-color: green;
}

原因分析

在调试器中查看渲染树可以看到，小程序在渲染自定义组件avatar的时候，会额外添加结点，使得其内部的样式会出现一些奇怪的问题，受影响较大的是flex、grid布局等，用来确定布局内容间隔而用的css选择器：:nth-child(n) 等皆会受到影响。

解决方法

微信小程序官方在2.11.2版本开始支持虚拟化结点，可以使组件本身的结点（也就是我们认为多出来的结点）消失，直接展示内部内容。

只需要在子组件js中加入以下配置：

渲染树就会如我们所想的那样展示了，不再会有多的结点。页面内容也如我们所愿。

微信小程序原生自定义组件布局问题相关推荐

微信小程序配置自定义组件代码按需注入 lazyCodeLoading
微信小程序配置自定义组件代码按需注入 lazyCodeLoading 官方网址在app.json最后一行加上,就可以了. "lazyCodeLoading": "re ...
微信小程序的自定义组件（2）
文章目录 6. 组件的生命周期 7. 组件所在页面的生命周期 8. 组件插槽 9. 组件父子组件间的通信 10. 组件-behaviors 6. 组件的生命周期 created attached re ...
微信小程序（自定义组件）
文章目录自定义组件创建自定义组件引用组件组件和页面的区别自定义组件的样式样式隔离修改样式隔离选项组件的data和methods 组件的properties 数据监听使用纯数据字段提升 ...
微信小程序之自定义组件(微信小程序完结)
微信小程序自定义组件类似vue或者react中的自定义组件, 小程序允许我们使用自定义组件的方式来构建页面. 1.1 创建自定义组件类似于页面,一个自定义组件由 json, wxml, wxss ...
微信小程序之自定义组件的使用、介绍、案例分享
微信小程序自定义组件介绍自定义组件发开文档类似vue或者react中的自定义组件, 小程序允许我们使用自定义组件的方式来构建页面. 自定义组件的使用 1. 创建组件(js,json,wxml,wx ...
微信小程序中自定义组件
文章目录小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js 自定义组件 compone ...
微信小程序_自定义组件_初体验
自定义组件是微信小程序中重要的组成部分,是实现模块化开发的重要手段个人认为,自定义组件是区分菜鸟与高手的分水岭第一篇先介绍小程序自定义组件的基本使用自定义组件的使用可以分为如下几个步骤创建组件 ...
微信小程序原生表格组件
cv大法:先找个差不多实现基本功能的组件源代码:GitHub - zss823158062/senx-table: 微信小程序表格组件 lrjTable 然后在上面做优化: 1.优化了按钮点击bu ...
【微信小程序】自定义组件的实现及数据交互
简单的自定义组件本文的使用场景是:多个页面都需要用到拨打电话功能,为减少代码量.便于维护,所以自定义了一个组件,每个页面直接调用即可.基本实现下图样式: 下面我们来一步步的实现它: step1:创建 ...
微信小程序 - 在自定义组件中请求后端 API 数据接口（引入该组件的页面触发）组件在哪个生命周期钩子函数中请求接口数据呢？
前言我开发了一个 A 页面,然后在 A 页面引入了一个组件 B ,我想在 B 组件中加载进来的时候执行一个后端请求,获取数据进行 B 组件渲染. 今天遇到这么一个问题,我写好的小程序组件(comp ...

微信小程序原生自定义组件布局问题

问题复现

原因分析

解决方法

微信小程序原生自定义组件布局问题相关推荐

最新文章

热门文章