Vant Weapp

目前, 我们隐藏整个结构是通过点击遮罩层实现. 但除此之外, 我们点击下拉本机键盘也表明我们需要隐藏整个结构, 而目前我们对于此功能尚未实现 但该事件并不仅仅是在键盘下拉时触发, 键盘上拉时也会触发. 因此我们考虑用该事件替换之前用于在键盘上拉时设置输入框位置的事件 bind:…

因为用户使用小程序是在渲染层, 但对数据进行进一步处理需要在逻辑层. 因此通常会需要将用户在渲染层的输入通过事件传递到逻辑层 以下是实现输入框三点需求对应的代码. (由于 field 组件使用到的接口较多, 为了代码的可读性, 我将其定位和大小两部分的样式拆分到一个外层 vie…

在本期, 我们实现了目标结构三大组成中的两部分: 按钮和遮罩层. 相对而言, 整个过程是较为轻松的. 在下一期, 我们将专注于实现目标结构的最后一部分: 输入框:)

如上图所示, 通常位于页面上方的 tabs 标签页是微信小程序中一个十分常见的结构, 用于分隔内容上有关联但属于不同类别的数据集合. 本期我们将一起探究 Vant Weapp 中 Tab 标签页的使用 如上图所示, 我们首先遇到的问题是 tabs 栏的高度是固定的 44 px,…

从图中可以看出, 从上往下依次为: navigation, page 和 tabbar. 由于我们没有使用自定义 navigation 栏, 因此, 我们只需要处理 page 和 tabbar 二者自身的弹性布局和相互之间的匹配即可 首先我们查看 tabbar 组件的相关文档,…

经过五篇文章的学习, 我们已经基本上了解了实现自定义 tabbar 所需的全部知识. 现在, 让我们一起来编写可能是最好的自定义 tabbar 吧:) 1. 在 app.json 中进行 tabbar 相关设置 2. 编写 custom-tab-bar 文件夹下文件 3. 在对…

在上期中, 我们了解了微信小程序中 Page, 页面内部组件和自定义 tabbar 的生命周期. 但除了这些常见的拥有生命周期的对象外, 微信小程序中还提供了其它更为进阶的拥有生命周期的对象, 且在微信小程序提供的自定义 tabbar 样例中就使用到了这些进阶对象

在初次加载时, 逻辑层在结束 create 进入 created 后, 会连续触发 onLoad, onShow 两个生命周期, 然后会将初始数据发送给渲染层, 渲染层在接受到数据后进行首次渲染, 渲染结束后用户可以看到页面. 因此我认为: onLoad 生命周期可以看作是页面…

... 可见在组件中不仅是不能单独使用标签名选择器, 嵌套写法也不能使用. 将嵌套写法改为单独的类写法就可以了 结合代码的含义是: 被视为组件的页面将在该组件所在页面被展示时, 执行使 tabbar 对应子项高亮的相关操作... 对此, 我的初步猜测是: 在使用 Compone…

在输入完基础用法样例中的代码后发现: 点击 tabbar 子项后, 该子项将会进入活跃状态. 我们需要的 tabbar 点击跳转功能就已经实现一半了(什么嘛，文档样例还是挺好用的嘛) 然而在代码输入完成后, 测试却发现实际效果并不和预想中的一样... 从 gif 图中可以看到,…

Vant Weapp 的 Tabbar 标签栏的引入流程实际上不是从 Vant Weapp 文档开始, 而是从微信小程序文档中的自定义 tabBar 页面开始. 但仅仅是成功出现 Tabbar 标签栏还不够, 我们还希望能够实现点击 Tabbar 标签栏进行页面跳转, 但在实现…

阅读优秀工程师撰写的文档对于像我这样的菜鸟而言, 是学习技术的最好途径. 但很多时候, 由于我与优秀工程师之间存在的差距, 很多在优秀工程师眼中稀松平常的行为, 在我这个菜鸟眼中却显得十分新奇, 进而变成了我眼中的"坑". 在此, 我想记录下这一系列"踩坑"的历程, 既是对自己…