微信小程序-气泡框 Popover

写在前面

记录基于微信小程序-气泡框实现中产生的问题及思考

问题截图

问题描述

模拟器显示正常，但在真机上点击后，气泡框的箭头并没有消失，且点击同一级别区域，能利用覆盖消除箭头。【是不是一个很可爱的bug？

问题解决过程记录

定位问题发生的原因范围
- 样式
  - 样式在判断显示条件(wx:if="{{visible}}")生效后，仍然渲染
  - 否定原因
    - 查询代码发现，整个样式背景的设定是在::before伪元素选择器中
    - 且显示条件生效，在调试器中已没有该元素，但仍显示
- 逻辑
  - 会不会是组件在渲染时，多渲染一份，我们使用判断条件进行开关时，只是对其中一个进行了操作
  - 怀疑依据
    - 上图可见：在popover组件下，有2个通过<slot>插入的相同内容
开始解决问题
- 查询官方关于slot方面的介绍
- 基于官方基础代码，复现问题
  - 产生一个child-tag组件，并在其中编写
```
// components/child-tag.js.js
Component({options: {multipleSlots: true // 在组件定义时的选项中启用多slot支持},/*** 组件的属性列表*/properties: {},relations: {'./component-tag-name': {type: 'parent',}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {}
})
```
  - 与component-tag-name绑定形成父子组件
```
// components/component-tag-name.js
Component({options: {multipleSlots: true // 在组件定义时的选项中启用多slot支持},relations: {'./child-tag': {type: 'child',}},/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {visible: false},/*** 组件的方法列表*/methods: {}
})
```
  - 并将index.html中进行调用
```

<view><button type="primary" bindtap="onTap">222</button><my-component id="component"><view slot="content">这里是插入到组件slot name="content"中的内容<child-component><view slot="child">这里是插入到组件slot name="child"中的内容</view></child-component></view></my-component>
</view>
```
  - 但是其结构树仍然非常正常，并没有出现那个所谓的"拷贝"组件
    - 仔细复现了几次，发现：多出来的那个组件会有所延迟。抓住这个问题，想到我们在onReady中，注册了该组件，于是，继续模拟
  - 修改index.js代码，并在component-tag-name组件注册onTap方法，控制显隐
```
  onReady() {this.component = this.selectComponent('#component')},onTap() {console.log('onTap')wx.createSelectorQuery().select('#component').boundingClientRect(res => {// 调用自定义组件 popover 中的 onDisplay 方法this.component.onTap();}).exec();}```
```
  - 最终复现
- 得出问题来源：
  - 在组件中进行了一次setData
- 思考背后问题
  - 在组件中setData为什么会”拷贝“一份相同的在页面级wxml中？
  - 猜想一：从WXS响应事件中，我隐隐得到了答案
  - 我们在页面级通过selectComponent实例化组件，对选中的组件进行操作，官方可以通过拷贝一份相同的组件，使我们便捷的将事件的处理从2次的逻辑层和渲染层通信以及一次渲染，减少到直接对页面上元素进行操作，即一次逻辑层和渲染层通信以及一次渲染。
  - 猜想二：问题层面是在微信开发者工具中的wxml，渲染方式对于这种情况就是这样处理的。
官方已给出问题原因

如何解决问题

在popover以及popover-item加入

options: {multipleSlots: true // 在组件定义时的选项中启用多slot支持},

就可以解决了。最后建议slot中可以写上name这样代码可能会更易读。

写在后面

祝大家多多发财

微信小程序-气泡框 Popover相关推荐

微信小程序提示框提示
微信小程序提示框很常见,有的项目弹出提示选择关闭的时候需要不再弹出,清理缓存的时候才弹出. var s = wx.getStorageSync('sh')if (s == '') {// s= tru ...
微信小程序选择框问题小程序picker点击显示object range-key=这里写要显示的字段
微信小程序选择框问题小程序picker点击显示object range-key="这里写要显示的字段" <picker bindchange="bindClass ...
微信小程序input框中加入小图标的实现方法
最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下: 然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误: ...
html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
封装微信小程序提示框
下面是封装好的封装微信小程序提示框,以便在开发过程中能快速使用,并且可以减少代码量. var showBusy = function(o) { return wx.showToast({ ...
微信小程序提示框使用，wx.showToast
微信小程序提示框使用 1.wx.showToast在官方文档的位置 2.使用代码模板 wx.showToast({title: '价格不能等于0',icon: 'success',duration: ...
[微信小程序]单选框以及多选框实例代码附讲解
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 效果图 <radio-group class="radio-group" b ...
微信小程序 input框进行双向绑定
在微信小程序的规则中,input标签中的数据为单向绑定,无法像Vue框架中的v-model直接进行input的双向绑定. 下面有一种思路来解决双向绑定这个思路. 1.利用bindinput记录下inp ...
微信小程序搜索框回车搜索事件
这里写的是在微信小程序里的搜索框,按软键盘回车键触发搜索事件. 首先前台代码,这是整个搜索框代码 <view class="weui-search-bar"><v ...

微信小程序-气泡框 Popover

写在前面

问题截图

问题描述

问题解决过程记录

如何解决问题

写在后面

微信小程序-气泡框 Popover相关推荐

最新文章

热门文章