微信小程序开发与共享

舒适的标签页交互？标签页的交互效果非常特殊。里面有很多小细节。

但是，在使用选项卡之前需要确定方向，即是否需要立即刷新。经过与众多小程序的多次比较和体验。切换选项卡项时，需要立即刷新的大多数页面是：[订单管理页面]，通常包括[所有订单、待付款、待发货、待接收、待评估]等，或者当您筛选商品列表中的条件[综合、销售（升序/降序）、价格（升序）/降序等]

在交互方面，用户还希望获得最新数据，因此他们不会“不喜欢”刷新请求的数据。

但对于另一个选项卡项，即“阅读”或“发现”的选项卡项，在切换选项卡时频繁刷新页面是一种奇怪的体验。

例如，用户浏览Tab-1中的列表，将页面滚动到距顶部1500rpx的距离，单击Tab-2，然后继续从Tab-2视图浏览列表，高度为0。

然后切换回Tab-1页面。如果Tab-1再次请求数据，并将原始距离1500rpx设置为0，这无疑是非常糟糕的。

用户希望Tab-1的浏览位置保持不变，而不是刷新，因为他们希望继续浏览。

此外，还有标签页。我认为标签选项应该固定在顶部，这样标签选项就不会在页面滚动时翻转。

抛出一个问题：【痛点】根据正常布局，H5标签页的标签项相互切换，滚动高度将被继承。

例如，当tab-1浏览高度为2000，并切换到tab-2时，tab-2的高度也为2000。当tab-2继续浏览时，它切换回tab-1，而tab-1与tab-2的滚动高度相关联。

[Bilibili小程序选项卡]研究：

而且

直到我看到bilibili小程序的标签体验，我发现它的交互与原生app非常接近。也就是说，选项卡项之间的高度不会相互影响。它还支持手动滑动开关。将不会再次加载加载的项目。每个项目的滚动高度位于用户阅读的位置。

后来，我进行了检查和实验。人们发现，bilibili小程序的标签页是使用一些“聪明”的技术制作的。

总体结构为：

用户定义选项卡的选项按钮（切换按钮）+滑动器组件中的滚动项，然后嵌套滚动视图组件（相应的内容视图）。

使用滑动器嵌套的目的是“是”选项卡支持手动视图切换，并链接到用户定义的选项按钮以突出显示。增加经验。

这里是绑定到选项卡标题以侦听相应索引的开关的cur值

｛｛item.txt｝｝

这是选项卡的内容项

<刷子>

<块>

卷轴-y

>

卷轴-y

>

但是，在小程序的视图视图中使用滚动视图组件的官方说明如下：

提示：滚动滚动视图时，页面反弹将被阻止，因此在滚动视图中滚动无法触发PullDownRefresh

提示：要使用下拉刷新，请使用页面的滚动而不是滚动视图，这样您可以通过单击顶部状态栏返回页面顶部

换句话说，它无法侦听页面的下拉刷新事件。

幸运的是，滚动视图组件有自己的属性和方法来支持类似的效果

Bindscrollcouple:监听滚动视图是否到达顶部/左侧

Bindscrolltower：监听滚动视图是否到达底部/右侧

文本：多考虑用户。当涉及[手机号码]、[地址]、[标题]和[线索]等字段时，我将使用视图将文本包再嵌套一层。因为文本带有可选属性。文本可以是可选的吗

使用此属性，重构页面将不会变冷。相反，当用户需要选择文本时，他们只支持选择、复制或其他操作。

，

“坑”：小程序输入、文本区和其他组件的z指数水平不是很高。

选择列表自定义组件以使用封面视图和封面图像组件，而不是视图和图像组件。封面视图和封面图像组件可以覆盖在某些本机组件上。

“坑”：小程序输入动态更改类型的值。小程序输入