swper 实现滑动切换功能的两种方式

1、共用一个样式结构，展示不同数据。
样式是一样的，在 tabBars 数组里面添加不同的数据，根据 id 值判断，遍历数组得到不同的数据。

<template><view><!--顶部导航栏--><view><view class="uni_tab_bar"><view class="uni_swiper_tab Insurance_top"><block v-for="(tabBar,index) in tabBars" :key="index"><view class="swiper_tab_list" :class="{'active': tabIndex==tabBar.id}"@tap="toggleTab(tabBar.id)">{{tabBar.name}}<view class="swiper_tab_line"></view></view></block></view></view><!-- 显示内容区域 --><view class="Insurance_centext"><swiper :current="tabIndex" @change="tabChange" class="Insurance_centext"><swiper-item v-for="(content,index) in tabBars" :key="index"><view class="swiper_item">{{content.name}}</view></swiper-item></swiper></view></view></view>
</template>
<script>export default {data() {return {tabIndex: 0, //选中标签栏的序列tabBars: [{id: '0',name: '第一列',},{id: '1',name: '第二列',},{id: '2',name: '第三列',},],}},methods: {toggleTab(index) {// 获取下标this.tabIndex = index;},//滑动切换swipertabChange(e) {const tabIndex = e.detail.currentthis.tabIndex = tabIndex},}}
</script><style>/* 头部导航 */.Insurance_top {display: flex;align-items: center;justify-content: space-around;background-color: #FFFFFF;}.swiper_tab_list {color: #888888;width: 50%;text-align: center;}.uni_tab_bar .active {color: #0c70cb;margin-top: 20rpx;margin-top: 20rpx;background-color: #FFFFFF;}/* 导航底部 boder 线 */.active .swiper_tab_line {border-bottom: 5rpx solid #0c70cb;margin-top: 20rpx;width: 100%;}.uni_swiper_tab {border-bottom: 2rpx solid #eeeeee;margin-bottom: 15rpx;}
</style>

2、不同的样式结构。
这种方式就相对于灵活许多了，在每一个 swiper-item 里面添加每个滑动模块的数据结构即可，每个滑动模块之前不会相互干扰

<template><view class="big"><view class="trade"><view class="texts" :class="curr==0?'active':''" data-index="0" @tap="setCurr">第一列</view><view class="texts" :class="curr==1?'active':''" data-index="1" @tap="setCurr">第二列</view><view class="texts" :class="curr==2?'active':''" data-index="2" @tap="setCurr">第三列</view></view><swiper style="height: 100vh;" :current="curr" @change="setCurr"><swiper-item><scroll-view>第一列</scroll-view></swiper-item><swiper-item><scroll-view>第二列</scroll-view></swiper-item><swiper-item><scroll-view>第三列</scroll-view></swiper-item></swiper></view>
</template><script>export default {data() {return {curr: 0}},methods: {setCurr(e) {let thisCurr = e.detail.current || e.currentTarget.dataset.index || 0;this.curr = thisCurr;}}}
</script><style>.trade {width: 100%;color: #0c70cb;overflow: auto;}.trade view {text-align: center;padding: 20rpx 0rpx;width: 30%;float: left;}.trade .texts.active {border-bottom: 6rpx solid #0c70cb;}
</style>

swper 实现滑动切换功能的两种方式相关推荐

layui导出Excel功能的两种方式的尝试
第一种方式利用layui自带的导出功能:在layui文档中有例子和代码网址:https://www.layui.com/demo/table/parseData.html 只需要在前端界面加入to ...
VUE实现点击头像出现遮罩层的功能的两种方式
本文是为了解决点击头像,出现一个遮罩层,显示上传头像.先说一下思路,第一种是用动画的方式来移动位置,但是ie9不支持动画,ie8一下直接不支持位置移动.所以某就研究了第二种方式,就是利用相对位置的固定 ...
uni-app切换选项卡的两种方式
方法一.切换选项卡时,内容改变,内容的样式不同. 定义索引:默认选中选项一切换选项卡的索引方法这是效果方法二.切换选项卡时,内容改变,内容的样式相同. 定义导航栏选项和索引,默认第一个切换索引 ...
安卓实现截图功能的两种方式
1.对指定的view进行截图 (解决了getDrawingCache得到的bitmap为null的问题)public static Bitmap loadBitmapFromView(View v) ...
全志T507操作小技巧连载1-T507屏幕切换的两种方式
一.硬件操作平台介绍 FETT507-C核心板集成全志T507四核车规级处理器设计开发,Cortex-A53架构,主频1.5GHz,集成G31 GPU,内存2GB DDR3L,存储8GB eMMC.整 ...
全志T507屏幕切换的两种方式
本文介绍了飞凌嵌入式全志T507屏幕切换控制的两种方式. 二.屏幕切换 OKT507-C开发板支持MIPI DSI.HDMI.TV等多种屏幕接口,同时可以进行两个屏幕的同显和异显,可灵活指定HDMI接 ...
Unity中制作自定义字体的两种方式
Unity支持自定义图片字体(CustomFont),网上有很多教程,细节不尽相同,当概括起来基本就是两种方式.一是使用BMFont,导出图集和.fnt文件,再使用图集在Unity中设置得到字体.二是 ...
Android 7.1 增加屏幕边缘滑动事件(手势滑动)两种方式(Back,Home,Menu功能键) 免开启无障碍功能
目前公司在做新项目开发,项目目前是不让有Back,Home,Menu实体按键,这就导致了一个问题,点开其它应用无法返回到桌面, 当然些问题对于做开发的我们肯定是难不到的,如果我们开发碰到这问题肯定是a ...
如何用两种方式同时实现ListBox的滚动功能
今天,要用WPF实现一个可以通过Windows触屏左右滑动的ListBox控件,并且,同时也可以通过点击两个按钮,进行左右滑动. 实现这个控件,有几个难点: 两种方式,都需要有一个共同的值或方式来记录 ...
win10关闭“Windows安全中心”功能的两种方法
win10系统怎么将windows安全中心关闭? 听语音原创 | 浏览:10407 | 更新:2020-03-24 10:54 1 2 3 4 5 6 7 分步阅读一些软件需要将Windows安全 ...

swper 实现滑动切换功能的两种方式

swper 实现滑动切换功能的两种方式相关推荐

最新文章

热门文章