微信小程序滚动tab选项卡,微信小程序实现tab切换
小程序是如何实现tab卡切换功能的？本文介绍了微信小程序切换tab卡的方法，希望对你有所帮助！
一、UI与交互
首先来看看要实现的ui外观和交互效果。下图是我们的一个入口，下面每个图标区域点击进去都会显示相应的卡片显示。
例如，当我点击图标tab2时，它会跳转到下图。
这个页面的显示是头部一个长长的标签栏，可以左右滑动，两边需要留出空白区域以实现两端的tab可实现居中效果。点击相应的选项卡显示相应的卡，且该tab的文字会居中展示。类似于轮播左右切换的效果，我觉得作为用户应该很容易想到这种交互。
当前激活的卡片相对于其他卡会有稍微大那么一点点的效果，可看见前后的卡片的边。并且卡片区域还可以左右滑动，达到和头部标签栏一样的交互效果。
大概就是这样的互动效果吧！
:
二、实现方案的设计
1.首先我们要知道前端显示的所有标签页是不是都显示了这么多次，或者有没有可能以后会扩展，或者有没有可能在上面迭代。个人觉得可以在这里和后端讨论一下，把我们需要展示的内容做成一套常量配置，然后就可以进行我们的动态渲染了。我大概在这里保持了这样一个常数。
数据：[
{
标题：“tab2”，//标题
LogoUrl: xxx ，//图标地址
IsNeed: false，//需要这个标签页吗？
Id: ，//每个选项卡对应一个id，与后端交互使用
内容： //每个页签对应的东西，用来展开
.
}
]大致就是上面这样的数据结构。
2.在入口点击对应图标时，可以将相对应的数组index或id带入详情页，实现对应卡片展示以及对应的ui。
3.在详情页的设计中，我把页面分成了两个组件个显示。
标题是对应的scroll-tab组件。在这个组件中，我使用的是微信小程序提供的scroll-view。这里需要设置参数scroll-x使其能够左右滑动，设置参数scroll-left使我们能够走点击某个tab或者滑动卡片时能够滚动到中间。内容是对应的swiper-card组件，其中我用了微信小程序提供的组件swiper。这里需要设置previous-margin和next-margin属性来设置当前卡与前后卡的距离。current属性设置当前显示的卡片，bindchange事件用于切换卡片时的交互。索引页。我选择上传一些相应的数据和current值和事件处理函数查看。
scroll-tab data= { { data } } current= { { current } } bind:choose detail= handleChooseDetail /
swiper-card data= { { data } } current= { { current } } bind:swiper change= handleswiper change /
/view4，具体实现
对于表头的tab列两边留出可滑动的空间，由于scroll-view内部元素无法填充这个tab的宽度，所以我们无法将其设置为100%来实现。在这里，我开始的想法是在它的前后放置一个空白元素来实现它的宽度。后来参考了某个写法，用了page-meta，不知道到底是什么鬼设置了左右两边的填充，实现了，但是会有page-meta只用于页面首个节点的warning。对于双方距离的设定和scroll-left的设定，我采用了以下方法。wx.getSystemInfo({
成功：res={
这个。Marginwidth=两边的res.windowwidth/2//Blank距离
}
})
const computedPosition=(margin，textArr，preWidthArr)={
//边距每个制表符之间的间距
//textArr是所有选项卡的文本宽度数组。
//preWidthArr是每个制表符和前一个制表符之间的距离的数组，第一个默认为0。
设distanceArr=[]
让len=textArr？长度
for(设I=0；我发短信？长度；i ) {
distance arr . un shift(preWidthArr[len-1](len-1)* margin textArr[len-1]/2)
伦-
}
//distanceArr是当每个选项卡居中时应该设置的向左滚动值。
回程距离r
}
//textArr[n]=第n个元素的宽度。
//const widthArr=[78，78，78，52，52，52]
//preWidthArr[n]=第n-1个制表符和前一个制表符之间的距离=元素宽度边距
//第一个选项卡没有previous元素
//const arr=[0，78，156，234，286，338]
//获取元素信息
getElementAttr() {
wx.createSelectorQuery()。在(这个)。选择全部(。swiper-text _ _ item’)。boundingClientRect(res={
const textWidth=res？map(item=item.width)
const preWidth=this . getprewidth(text width)
this . distance earr=computed position(MARGIN，textWidth，preWidth)
})。执行()
},
getPreWidth(textWidth) {
const arr=[0]
for(设I=0；I text width . length-1；i ) {
arr.push(textWidth[i] arr[i])
}
返回arr
}对于内容区的卡片，可以将当前卡片设置不同的transfrom: scale(倍数)赠送给其他卡片，赠送一张过渡效果transition，实现简单的交互效果。
三、大功告成，开始复盘
滚动视图的scroll-left曾经踩到无效滚动视图的内容区域，无法达到100%的全宽。如何根据不同制表符的宽度设置相应的向左滚动距离？如何在左右两边留一个可滑动的区域？如何做出更流畅更友好的交互效果
写在最后
前段时间拍的这个。当我需要时，作为所有者，我和一位同事评估了10个人日的需求评估时间表。自然也想尝试一下，所以选择了ui和交互更复杂的内容。当然，以上要实现的内容只是一部分。说实话，我在实现的过程中真的很惨。还有一个半圆弧状的进度条展示，首尾都要有弧度的那一种，作为一个应届小白学生，我做不到的事情还是太多了。即使这些内容在他们眼里被认为是很简单的内容，也能一下子实现。在这里我要经历太多。我知道我的食物，但我会继续努力。作为一名前端开发者，实现ui设计稿高还原一直是我的初衷。但是希望你不要拿着这个“Ixxx（多久时间）就能做出来的口吻”来pua我。至少我觉得过几年我会比你强，但我肯定不会用这种口气对待新同事。
【相关学习推荐：小程序开发教程】以上是小程序如何实现tab卡切换功能的详细内容。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。