文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

小程序怎么实现tab卡片切换功能

2024-04-02 19:55

关注

这篇文章主要介绍小程序怎么实现tab卡片切换功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

一、UI与交互

首先我们来看看要实现的ui模样和交互效果吧,下图是我们的一个入口,以下的每一个icon区域点击进去都会展示对应的卡片展示。

小程序怎么实现tab卡片切换功能

例如我点击tab2这一个icon时,对应跳转到如下图所示。

该页面的展示为头部是一长条tab栏,左右可滑动,两边需要留出空白区域以实现两端的tab可实现居中效果,点击对应的tab可展示相应的卡片,且该tab的文字会居中展示。类似轮播图左右切换的效果,我想作为用户应该很容易可以想到这种交互。

当前激活的卡片会有一个感觉比别的卡片稍微大那么一点点的效果,且可看见前后的卡片的边。且该卡片区域也可左右滑动实现与头部tab栏一样交互的效果。

大概就是这样的一个交互效果啦!

小程序怎么实现tab卡片切换功能

二、实现方案的设计

1、首先我们需要知道前端展示的所有tab是一直都这样展示这么多个吗,还是说有可能后续会扩展,再或许说有可能在这上面进行迭代。我个人认为这里可以跟后端商量一下,将我们需要展示的内容统一做成一套常量配置,然后就可以做出我们的动态渲染了。在这里我是大概维护了这样的一个constant。

data: [
  {
    title: 'tab2', // 
    logoUrl: 'xxx', // 图标地址
    isNeed: false, // 是否需要该tab 
    id: '', // 每个tab对应的一个id,与后端交互使用
    content: '' // 每个tab对应的一些内容,用于扩展
    ...
  }
]

就是大概的这样以上的一个数据结构。

2、在入口处点击对应icon时可以把相对应的数组index或者id带入详情页面,以实现对应的卡片展示以及对应的ui

3、在详情页面的设计中,我将该页面分成两个组件展示。

<view>
    <scroll-tab data="{{data}}" current="{{current}}" bind:chooseDetail="handleChooseDetail" />
    <swiper-card data="{{data}}" current="{{current}}" bind:swiperChange="handleSwiperChange" />
</view>

4、具体实现

wx.getSystemInfo({
          success: res => {
            this.marginWidth = res.windowWidth / 2 // 两边空白距离
          }
        })
        
        
const computedPosition = (margin, textArr, preWidthArr) => {
  // margin每个tab之间的间距
  // textArr为所有tab的文字宽度的数组
  // preWidthArr为每一个tab与前一个tab的距离数组,第一个默认为0
  let distanceArr = []
  let len = textArr?.length
  for (let i = 0; i < textArr?.length; i++) {
    distanceArr.unshift(preWidthArr[len - 1] + (len - 1) * margin + textArr[len - 1] / 2)
    len--
  }
  // distanceArr为每个tab居中展示时应该设置的scroll-left值
  return distanceArr
}

// textArr[n] = 第 n - 1元素的宽度
// const widthArr = [78, 78, 78, 52, 52, 52]

// preWidthArr[n] = 第n - 1个tab距离前面tab的距离 = 元素宽 + margin
// 第一个tab没有前面的元素
// const arr = [0, 78, 156, 234, 286, 338]

// 获取元素信息
getElementAttr() {
        wx.createSelectorQuery()
          .in(this)
          .selectAll('.swiper-text__item')
          .boundingClientRect(res => {
            const textWidth = res?.map(item => item.width)
            const preWidth = this.getPreWidth(textWidth)
            this.distanceArr = computedPosition(MARGIN, textWidth, preWidth)
          })
          .exec()
},
getPreWidth(textWidth) {
        const arr = [0]
        for (let i = 0; i < textWidth.length - 1; i++) {
          arr.push(textWidth[i] + arr[i])
        }
        return arr
}

以上是“小程序怎么实现tab卡片切换功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯