利用cube-tab-bar 搭配cube-ui的组件(cube-slide ,cube-scroll)来做出App屏幕切换,Tab跟随页面变化效果
2021/4/11 18:31:26
本文主要是介绍利用cube-tab-bar 搭配cube-ui的组件(cube-slide ,cube-scroll)来做出App屏幕切换,Tab跟随页面变化效果,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
- 跟随页面左右移动,上方tab跟随,及点击切换效果实现
3.代码
<template> <div> <div class="hea" > <cube-tab-bar :showSlider="true" v-model="selectedLabel" :data="tabs" ref="tabBar" class="border-bottom-1px" > </cube-tab-bar> </div> <div class="slide-wrapper"> <cube-slide :loop=false :auto-play=false :show-dots=false :initial-index="index" ref="slide" :options="slideOptions" @scroll="onScroll" @change="onChange" ><!--show-dots=是否显示轮播指示点;loop:是否循环播放--> <cube-slide-item > <!--每一个tab页面,自己写页面就行--> 冰壶 </cube-slide-item> <cube-slide-item > 滑冰 </cube-slide-item> <cube-slide-item > 雪橇 </cube-slide-item> <cube-slide-item> 高山滑雪 </cube-slide-item> <cube-slide-item> 北欧 </cube-slide-item> </cube-slide> </div> </div> </template>
<script> export default { data () { return { index: 0,//索引,用来转换tab标识 tabs: [ { label: '冰壶' }, { label: '滑冰' }, { label: '雪橇' }, { label: '高山滑雪' }, { label: '北欧' }, ], slideOptions: { listenScroll: true, // 监控scroll事件 probeType: 3, // 0 不派发scroll事件,1:非实时;2:滑动过程中;3:不仅在屏幕滑动的过程中,而且momentum 滚动动画运行过程中实时派发 directionLockThreshold: 0 //当我们需要锁定只滚动一个方向的时候,我们在初始滚动的时候根据横轴和纵轴滚动的绝对值做差,当差值大于 directionLockThreshold 的时候来决定滚动锁定的方向。 } } }, methods: { onScroll (pos) { // cube-slide的scroll事件,获取到滚动位置的坐标值,传值x,y来获取 // 滚动slide的时候,tab实时改变 // 原理是:先获取tabBar和slide的宽度,然后获取到滚动位置的坐标值,坐标值/slideWidth得到滚动的比例,然后*tabBarWidth,实时得到 // tab下划线的滚动位置 const tabBarWidth = this.$refs.tabBar.$el.clientWidth const slideWidth = this.$refs.slide.slide.scrollerWidth const transform = -pos.x / slideWidth * tabBarWidth this.$refs.tabBar.setSliderTransform(transform) // 调用cube-tab的setSliderTransform方法,参数就是上面得到的值 }, onChange (current) { this.index = current } }, computed: { selectedLabel: { get () { return this.tabs[this.index].label }, // 点击tab的时候设置selectedLabel, // 计算当前index是什么, set (newVal) { this.index = this.tabs.findIndex((value) => { return value.label === newVal }) } } }, } </script>
这篇关于利用cube-tab-bar 搭配cube-ui的组件(cube-slide ,cube-scroll)来做出App屏幕切换,Tab跟随页面变化效果的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-30uniAPP 实现全屏左右滚动滚动的效果-icode9专业技术文章分享
- 2024-06-30如何在本地使用授权或插件-icode9专业技术文章分享
- 2024-06-30伪静态规则配置方法汇总-icode9专业技术文章分享
- 2024-06-29易优CMS安装常见问题汇总-icode9专业技术文章分享
- 2024-06-28易优新手必读安装教程-icode9专业技术文章分享
- 2024-06-28忘记eyoucms后台密码怎么办?-icode9专业技术文章分享
- 2024-06-26终极指南:Scrum中如何设置需求优先级
- 2024-06-26AI大模型企业应用实战(25)-为Langchain Agent添加记忆功能
- 2024-06-26小白家庭 nas 搭建方案-icode9专业技术文章分享
- 2024-06-23AI大模型企业应用实战(14)-langchain的Embedding