uniapp tab 栏选项卡与内容区域联动

1.这个是shi t

<template><view class="tab"><!-- 横向滚动 --><scroll-view scroll-x="true" class="tab_scroll"><!-- 具体的滚动内容 --><view class="tab_scroll_box"><view v-for="item in 10" class="tab_scroll_item">{{item}}内容</view></view></scroll-view></view>
</template>

2.联动的内容区域我们可以使用swiper 搭配 view-scrllo ，因为swiper @chagne 事件可以监听滑动

思路：

1.定义的flag 是当前tab 选项卡选中的第几项

2.swiper 的change 事件可以监听滑动事件的监听

3.在methons 写入 change 事件的方法

4.这个change 返回的对象里面有个detail.current , 我们现在需要把这个获取的current 传给tab,这样我们就完成了tab 和内容区的一个联动

5.页面接收这个事件

6.处理这个事件

7.在首页tab 上定义一个变量，在将这个current 赋值给这个定义的tab 变量

8.tab 组件

监听这个值的变化

uniapp tab 栏选项卡与内容区域联动相关推荐

JavaScript基础 - 经典案例3 - tab栏选项卡切换
通常我们用 js 写 tab 栏切换功能会用到排他思想,即干掉其他人,留下我自己但也可以用一个更有效率的方法:找出那个特殊的人,精准干掉他,放过其他无辜的人,然后留下我自己实现过程:假设需要切换 ...
原生JS实现 ‘Tab栏切换’，‘手风琴’，‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
vant中 tab栏遇到的坑 van-tabs。
话不多说,先看下问题描述: 我的需求:(和头条的tab栏类似 ,单击查看头条tab栏) 点击tab栏,下方展示出来当前tab栏下的内容列表(A页面),点击列表进入详情内容(B页面),但是返回(A页面) ...
uni-app导航栏
uni-app导航栏 1. 原生导航栏原生导航优点原生导航缺点原生导航栏的通用配置: 全局导航栏样式设置(globalStyle): 单页面导航栏样式设置: 2. 全局取消原生导航栏 3. 单页 ...
步骤条与Tab栏的联动 ~ 不要错过
步骤条与 Tab栏的联动 <!-- :active="activeIndex" 指定激活项的索引 (activeIndex 用于操 ...
uni-app项目配置手机端底部的tab栏（一）
一般我们在开发手机应用的时候都会有手机底部的tab导航栏,然而我们在使用uni-app开发的时候,我们可以直接在项目中配置tab即可,非常的方便. 1.创建项目我们用uni-app官方提供的HBui ...
jQuery特效Tab切换栏选项卡demo
在建站过程中,有时候需要有效利用页面空间,需要将多个模块的链接.图片.视频等网站资源放在一个div中,实现点击或者滑动实现展示多个模块,多用在侧边栏展示网站最新更新.最热文章,或者是展示顶级频道页面下 ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果...
<Android实现连续并排的若干个TextView单击改变背景颜色达到选项卡Tab栏切换效果> 实现的组件交互目的很简单,就是要达到类似tab选项卡的导航栏一样,当用户点击了连续并排的若 ...

uniapp tab 栏选项卡与内容区域联动

uniapp tab 栏选项卡与内容区域联动相关推荐

最新文章

热门文章