小程序里面的页面设置tabbar(小程序设置可滑动的tab选项卡)

技术小程序怎么实现tab卡片切换功能这篇文章主要介绍小程序怎么实现tab卡片切换功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、UI与交互首先我们来看看要实现的ui模样和交互效果吧,下图是我

本文主要介绍如何通过小程序实现标签卡切换功能。文章很详细,有一定的参考价值。感兴趣的朋友一定要看完!

00-1010首先,我们来看看要实现的ui外观和交互效果。下图是我们的一个入口,下面的每个图标区域都会显示相应的卡片显示。

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

例如,当我单击图标tab2时,相应的跳转如下图所示。

页面显示在头部有一个长的标签栏,可以左右滑动。两边需要留出空白区域以实现两端的tab可实现居中效果,点击对应的标签显示对应的卡片,且该tab的文字会居中展示.类似于转盘左右切换的效果,我觉得用户很容易想到这个交互。

当前激活的卡片会有一种感觉,稍微大那么一点点比其他卡牌效果更好,可看见前后的卡片的边.和卡牌区也可以左右滑动,达到和表头标签栏一样的交互效果。

大概就是这样的互动效果吧!

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

00-1010 1.首先,我们需要知道前端显示的所有选项卡是否总是这样显示,或者将来是否有可能扩展,或者可能在此基础上迭代。我个人认为我们可以在这里和后端讨论一下,把我们需要展示的内容统一成一套常量配置,然后我们就可以进行我们的动态渲染了。我在这里大概保持了这样一个常数。

数据:[

{

Title:'tab2 ',//title

Url :' XXX ',//图标地址

IsNeed:false,///,//是否需要此选项卡?

Id: ' ',//每个选项卡对应的Id,与后端交互使用。

Content:''//每个选项卡对应的一些内容,用于扩展。

.

}

]可能是上述数据结构之一。

2.点击入口对应的图标,将相对应的数组indexid带入详细页面,实现对应的卡片展示以及对应的ui.

3.在设计详情页的时候,我把页面分成了两个组件进行展示。

标头是相应的scroll-tab组件。在这个组件中,我使用了微信小程序提供的组件滚动视图。在这里,我们需要设置scroll-x的参数,使其能够左右滑动,并设置scroll-left的参数,以实现我们的点击某个tab或者滑动卡片时能够滚动到中间.之旅

内容是相应的swiper-card组件。在这个组件中,我使用了微信小程序提供的组件swiper。在这里,我们需要设置它的previous-marginnext-margin属性来设置当前卡和前两张卡之间的距离。current属性设置当前显示的卡片,bindchange事件用于卡片切换交互。

索引页上传参数我选择上传一些相应的数据以及current值事件处理函数.

视角

卷起

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

4、具体实现

  • 对于Header的tab栏两边留出可滑动的空间,因为scroll-view内部元素是无法占满该tab的宽度的,因此我们没有办法给其设置100%来实现。在这里我开始的想法是给其前后放置一个空白元素来给其宽度实现,后面参考了某个写法用了page-meta这个我也不太清楚是什么鬼的组件来设置左右的padding来实现,但是会有page-meta只用于页面首个节点的warning。对于两边距离的的设置,和scroll-left的设置,我采用了以下方法。

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
}
  • 对于Content内容区域的卡片,可以给当前卡片与别的卡片设置不同的transfrom: scale(倍数),并且给一个过渡效果transition即可实现简单的交互效果。

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

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/146796.html

(0)

相关推荐

  • spark环境搭建

    技术spark环境搭建 spark环境搭建spark环境搭建
    spark下载地址:http://archive.apache.org/dist/spark/
    Scala下载地址:https://scal

    礼包 2021年11月9日
  • 怎么解决Mysql中的Last_Errno报错问题

    技术怎么解决Mysql中的Last_Errno报错问题本篇内容主要讲解“怎么解决Mysql中的Last_Errno报错问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么解

    攻略 2021年11月18日
  • 移动前端开发和Web前端开发的区别有哪些

    技术移动前端开发和Web前端开发的区别有哪些本篇内容介绍了“移动前端开发和Web前端开发的区别有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大

    攻略 2021年10月27日
  • mobx报错

    技术mobx报错 mobx报错错误信息
    Support for the experimental syntax 'decorators-legacy' isn't currently enab
    安装mo

    礼包 2021年12月13日
  • Android Studio常用插件有哪些

    技术Android Studio常用插件有哪些小编给大家分享一下Android Studio常用插件有哪些,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了

    攻略 2021年11月23日
  • GRYZ10.18模拟赛解题报告

    技术GRYZ10.18模拟赛解题报告 GRYZ10.18模拟赛解题报告写在前面
    期望得分:\(100+100+100=300pts\)
    实际得分:\(100+100+10=210pts\)
    挂了一个 \

    礼包 2021年10月19日