介绍
这篇文章主要介绍小程序怎么实现标签卡片切换功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
<强>一、UI与交互 首先我们来看看要实现的UI模样和交互效果吧,下图是我们的一个入口,以下的每一个图标区域点击进去都会展示对应的卡片展示。
例如我点击tab2这一个图标时,对应跳转到如下图所示。
该页面的展示为头部是一长条选项卡栏,左右可滑动,<强>两边需要留出空白区域以实现两端的选项卡可实现居中效果强,点击对应的选项卡可展示相应的卡片,<>强且该选项卡的文字会居中展示强。类似轮播图左右切换的效果,我想作为用户应该很容易可以想到这种交互。
<强>当前激活的卡片强会有一个感觉比别的卡片<强>稍微大那么一点点强的效果,且<强>可看见前后的卡片的边强。且该卡片区域也可左右滑动实现与头部标签栏一样交互的效果。
大概就是这样的一个交互效果啦!
<强>二,实现方案的设计 1,首先我们需要知道前端展示的所有选项卡是一直都这样展示这么多个吗,还是说有可能后续会扩展,再或许说有可能在这上面进行迭代。我个人认为这里可以跟后端商量一下,将我们需要展示的内容统一做成一套<强>常量配置强,然后就可以做出我们的动态渲染了。在这里我是大概维护了这样的一个常数。
数据:,(
{才能
,,,标题:,& # 39;tab2 # 39;,,//,标题
,,,logoUrl:, & # 39; xxx # 39;,,//,图标地址
,,,isNeed:,假的,,//,是否需要该tab
,,,,,& # 39;& # 39;,,//,每个标签对应的一个id,与后端交互使用
,,,内容:,& # 39;& # 39;,//,每个标签对应的一些内容,用于扩展
,,,…
,,}
) 就是大概的这样以上的一个数据结构。
2,在入口处点击对应图标时可以把<强>相对应的数组指数强或者<强> id 强带入详情页面,以实现对应的<>强卡片展示以及对应的ui
3,在详情页面的设计中,我将该页面分成<强>两个组件强展示。
<李> 标题为对应的<强> scroll-tab 强组件,在该组件中我使用了微信小程序提供的组件滚动视图,在这里我们需要给其设置<强> scroll-x 的参数使其能够进行左右滑动,设置<强>左右滚动参数实现我们<强>点击某个选项卡或者滑动卡片时能够滚动到中间去。
<李> 内容为对应的<强> swiper-card 强组件,在该组件中我使用了微信小程序提供的组件偷窃者,在这里我们需要给其设置<强>以前和<强> next-margin 属性设置当前卡片与前后两张卡片的距离,当前<强> 属性设置当前展示的卡片,<强> bindchange 事件用于卡片切换时的交互。
<李> 索引页面传参我选择传对应的一些数据以及<强>当前值和<强>事件处理函数
& lt; view>
,,,& lt; scroll-tab https://www.yisu.com/zixun/data="{{数据}}"当前=皗{当前}}”绑定:chooseDetail=" handleChooseDetail "/>
4,具体实现
<李> 对于标题的选项卡栏<强>两边留出可滑动的空间强劲,因为滚动视图内部元素是无法占满该选项卡的宽度的,因此我们没有办法给其设置100%来实现。在这里我开始的想法是给其前后放置一个空白元素来给其宽度实现,后面参考了某个写法用了<强>页面元这个我也不太清楚是什么鬼的组件来设置左右的填充来实现,但是会有<强>页面元只用于页面首个节点的警告强。对于两边距离的的设置,和<强>左右滚动的设置,我采用了以下方法。
wx.getSystemInfo ({
,,,,,,,,,成功:,res =祝辞,{
,,,,,,,,,,,this.marginWidth =, res.windowWidth /, 2,//,两边空白距离
,,,,,,,,,}
,,,,,,,})
,,,,,,,
,,,,,,,
const computedPosition =,(保证金,textArr,, preWidthArr),=祝辞,{//,保证金才能每个标签之间的间距//才能,textArr为所有标签的文字宽度的数组//才能,preWidthArr为每一个标签与前一个选项卡的距离数组,第一个默认为0
let 才能;distanceArr =, []
let 才能;len =textArr ? . length
for 才能;(let 小姐:=,0;,小姐:& lt;, textArr ? . length;,我+ +),{
,,,distanceArr.unshift (preWidthArr [len 安康;1],+,(len 安康;1),*,margin +, textArr [len 安康;1],/,2)
,,,len—
,,}//才能,distanceArr为每个标签居中展示时应该设置的左右滚动值
return distanceArr才能
}//,textArr [n],=,第,n 作用;1元素的宽度//,const widthArr =,(78,, 78,, 78,, 52岁,52岁,52)//,preWidthArr [n],=,第n 作用;1个选项卡距离前面选项卡的距离,=,元素宽,+利润//,第一个选项卡中没有前面的元素//,const arr =, [0, 78, 156, 234, 286, 338]//,获取元素信息
getElementAttr (), {
,,,,,,,wx.createSelectorQuery ()
,,,,,,,,,在这
,,,,,,,,,.selectAll (& # 39; .swiper-text__item& # 39;)
,,,,,,,,,.boundingClientRect (res =祝辞,{
null
null
null
null
null
null
null
null
null
null
null
null
null
