微信小程序利用swiper+scroll-view实现Tab切换
微信小程序利用swiper+scroll-view实现Tab切换
先放一张效果图
需要实现的功能逻辑:
1、当用户点击tab的时候,tab样式发生改变,并且下方对应的展示内容也发生改变。
2、当用户滑动下方内容时,会切换内容,并且上方的tab也会根据对应的展示内容改变选中状态
关键问题:如何将tab和下方的内容对应起来?
思路:
设置一个currentIndex变量,tab的选中状态以及展示的内容都根据这一个变量来进行切换。并且在用户触发点击tab事件和滑动内容事件的时候,都会更新这个currentIndex的值。
tab部分的wxml:
<view class="nav_wrap"><scroll-view class="nav" scroll-x scroll-left="{{navScrollLeft}}"><view bindtap="activeNav" data-index="{{index}}" class="nav_item {{index===currentIndex?'active':''}}" wx:for="{{navList}}" wx:key="{{index}}">{{item.text}}</view></scroll-view>
</view>
tab部分的js:
activeNav(e) {this.setData({currentIndex: e.currentTarget.dataset.index,navScrollLeft: e.detail.current >= 5 ? ((e.detail.current) * 80) : 0})},
1、这里tab选中状态是根据currentIndex开进行判断的,如果currentIndex等于当前节点绑定的index,就给该节点加上选中时的class。
2、使用data-index="{{index}}"将index值绑定在该节点上,当用户点击tab时会触发activeNav事件。该事件会用e.currentTarget.dataset.index获取该节点绑定的index的值,并将这个值赋给currentIndex。
3、因为我这里的tab数量较多,所以还设置了一个navScrollLeft,用来自动改变scroll-view的离左侧的距离。这样当tab切换到第 6个以及6个之后的时候,可以从视觉角度上让该tab展示在第一个tab的位置。
swiper部分的wxml:
<swiper style="height:{{clientHeight?clientHeight+'px':auto}}" current="{{currentIndex}}" bindchange="changeTab"><swiper-item><view class="slide"><navigator><swiper autoplay indicator-dots circular><swiper-item wx:for="{{swiperList}}" wx:key="{{index}}"><image src="{{item.imgSrc}}" mode='widthFix'></image></swiper-item></swiper></navigator></view><view class="vedioWrap"><navigator url="../detail/detail?id={{item.id}}" class="vedioList" wx:for="{{vedioList}}" wx:key="index"><image src="{{item.imgSrc}}" mode="widthFix"></image><view class="text">{{item.videoTitle}}</view></navigator></view></swiper-item><swiper-item wx:for="{{contentList}}" wx:key="{{index}}">{{item.text}}</swiper-item>
</swiper>
swiper部分的js:
changeTab(e){this.setData({currentIndex: e.detail.current,navScrollLeft: e.detail.current>=5?((e.detail.current) * 80):0})},
1、swiper里展示的内容通过设置current="{{currentIndex}}"属性来根据currentIndex进行改变。
2、当用户滑动内容时,设置 bindchange="changeTab"来触发changeTab事件。该事件将当前内容的索引值赋给currentIndex。
3、这里的swiper的高度是通过计算获取的。因为这里展示的内容是通过后台接口获取并渲染出来的,所以不能给他一个固定值,又不能不给,因为swiper的默认高度只有150px,所以大家一定要根据自己的情况去将这个值计算出来在切换tab的时候重新赋值。
微信小程序利用swiper+scroll-view实现Tab切换相关推荐
- 微信小程序利用scroll-view和swiper实现图片滚动切换
微信小程序利用scroll-view和swiper实现图片滚动切换 <view class="starbox"><view class="starare ...
- 微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...
- 微信小程序利用腾讯云IM发送语音 + 图片
微信小程序利用腾讯云IM发送语音 + 图片 能做到这里 说明你已经可以发送普通文本了 如果没有的话可以看一下我的上一篇文章 有完整的讲解 效果图 语音聊天 发送图片 传送 → 发送图片 发送语音 ** ...
- 微信小程序-导航吸顶+view锚点
微信小程序--导航吸顶+view锚点 导航栏滑动定位+view锚点 效果图 实现原理 WXML WXSS JS-主页面 子页面-newcontent 导航栏滑动定位+view锚点 我们在做小程序的时候 ...
- 微信小程序利用echarts实现中国任意行政区域地图
微信小程序利用echarts实现中国任意行政区域地图 前言 实现 克隆代码 集成 点击事件 点击跳转 代码改造 尾巴 前言 最近微信小程序中需要绘制地图,然后点击地图可以跳转到下一层级.研究了一番,选 ...
- 微信小程序设置swiper圆角在ios上失效解决
今天在给轮播图添加圆角的时候,发现在安卓机上是有圆角的,但是在苹果手机上圆角却失效了,后来翻阅了文档发现这是个bug.下面是两种解决方案:第一种:-webkit-backface-visibility ...
- 微信小程序利用云开发实现评论功能
微信小程序利用云开发实现评论功能 如果喜欢可以给我一个关注. 一.微信小程序,评论功能的实现. 首先我们先布局,一个文章或者是商品,底下是评论, <!-- 商品详情 --> <vie ...
- 微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
- 微信小程序view动态长度_微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】...
本文实例讲述了微信小程序实现动态改变view标签宽度和高度的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 index.wxml文件 >我是view标签,我现在的宽度是{{v ...
最新文章
- android中Logcat的TAG过滤
- Response对象学习
- 2020数字中国创新大赛-智能算法赛-冠军方案分享
- 【ECharts系列|02可视化大屏】 舆情分析,人口分析及警情警力活动情况的实现【下篇】
- WordPress插件WBOLT百度推送管理插件3.4.10 Pro绿色版
- 记录——《C Primer Plus (第五版)》第七章编程练习第三题
- 19. JavaScript RegExp 对象
- 使用ENVI对遥感图像进行图像镶嵌、图像裁剪。
- Ant、 Maven 、 Gradle—Java构建工具比较
- 丁昊 北大计算机,北大、清华共17人!2018自主招生等类型入选名单公示,苏州333人!...
- SAP MM模块库存结存报表
- 信息规范和信息安全素养计算机,技师学院计算机专业学生信息安全意识培养的教学研究...
- C++:C++11的牛逼特性
- ID卡IC卡的复制卡种类介绍
- 计算机网络:自顶向下方法 笔记
- IP地址和MAC 地址
- Git详解之六:Git工具
- VB和VB.net环境下链接Access、SQL数据库的方法及技巧(Access篇)
- 尝到“线下”的甜,但随行付也吃到了模式的苦
- linux音频服务器,在Ubuntu Linux上配置MPD音乐服务器
热门文章
- 《机器学习》周志华课后习题答案——第一章(1-3题完结)
- EndNote参考文献管理与编辑软件
- 华为nova7se能云闪付吗_Huawei Pay开通与使用银联云闪付教程
- Java实现图片(Image)转字符(ASCII)图片
- java+uniapp对接app微信支付
- 如何用O(n)实现四等分数组
- 社交网络分析:网络中心性
- hexo静态网站部署到腾讯云cos
- STM32G0系列将内部FLASH作为EEPROM使用,巧妙编程,可延长Flash擦写寿命上百倍,已用于量产产品。
- matlab非同秩矩阵相乘_MATLAB中的矩阵与向量运算