小程序开发中如何利用选项卡实现一个滚动选项卡 - 行业资讯

　　介绍

这篇文章给大家介绍小程序开发中如何利用选项卡实现一个滚动选项卡,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

具体内容如下

最终效果如上。问题:

1,标签标题总共8个,所以一屏无法全部显示。
2,选项卡内容区左右滑动切换时,标签标题随即做标记(活跃)。
3,当活跃的标题不在当前屏显示时,要使其能显示到当前屏中。

<强>一、wxml结构

标签标题因一排八个,所以使用滚动视图组件,使其可横向滚动。
标签内容可左右滑动切换,使用偷窃者组件实现
为了偷懒,所以数据都通过天气:为遍历重复出来。

1,设置数据流属性用于:点击当前项时,通过点击事件swichNav中处理e.dataset.current取到点击的目标值。
2,偷窃者组件的当前组件用于控制当前显示哪一页
3,偷窃者组件绑定改变事件switchTab,通过e.detail.current拿到当前页

& lt;视图比; 　　& lt;滚动视图scroll-x=皌rue"类=皌ab-h"左右滚动=皗{scrollLeft}}“比; 　　& lt;视图类=皌ab-item {{currentTab==0, # 63; & # 39;活跃# 39;:& # 39;& # 39;}},数据流=?”;bindtap=皊wichNav"祝辞健康& lt;/view> 　　& lt;视图类=皌ab-item {{currentTab==1, # 63; & # 39;活跃# 39;:& # 39;& # 39;}},数据流=?”;bindtap=皊wichNav"祝辞情感& lt;/view> 　　& lt;视图类=皌ab-item {{currentTab==2, # 63; & # 39;活跃# 39;:& # 39;& # 39;}},数据流=?”;bindtap=皊wichNav"祝辞职场& lt;/view> 　　& lt;视图类=皌ab-item {{currentTab==3, # 63; & # 39;活跃# 39;:& # 39;& # 39;}},数据流=?”;bindtap=皊wichNav"祝辞育儿& lt;/view> 　　& lt;视图类=皌ab-item {{currentTab==4, # 63; & # 39;活跃# 39;:& # 39;& # 39;}},数据流=?”;bindtap=皊wichNav"祝辞纠纷& lt;/view> 　　& lt;视图类=皌ab-item {{currentTab==5, # 63; & # 39;活跃# 39;:& # 39;& # 39;}},数据流=?”;bindtap=皊wichNav"祝辞青葱& lt;/view> 　　& lt;视图类=皌ab-item {{currentTab==6, # 63; & # 39;活跃# 39;:& # 39;& # 39;}},数据流=?”;bindtap=皊wichNav"祝辞全部& lt;/view> 　　& lt;视图类=皌ab-item {{currentTab==7, # 63; & # 39;活跃# 39;:& # 39;& # 39;}},数据流=?”;,bindtap=皊wichNav"的在其他& lt;/view> 　　& lt;/scroll-view> 　　& lt;偷窃者类=皌ab-content"当前=皗{currentTab}},时间=?00”;bindchange=皊witchTab" 　　比; 　　& lt; swiper-item wx:=皗{[0, 1, 2, 3, 4, 5, 6, 7]}}“比; 　　& lt;滚动视图scroll-y=皌rue"类=皊coll-h"比; 　　& lt;块wx:=皗{[1, 2, 3, 4, 5, 6, 7, 8]}},天气:关键=? this"比; 　　& lt;视图类=癷tem-ans"祝辞　　& lt;视图类=癮vatar"祝辞　　& lt;图象类=癷mg"src=https://www.yisu.com/zixun/"/avatar.png "> 　　　　<视图类=" expertInfo "> 　　<视图类="名称">欢颜　　<视图类=氨昵?知名情感博主　　<视图类=" answerHistory "> 134个回答,2234人听过　　　　<导航器url="/页面/askExpert/expertDetail”类=" askBtn ">问助教　　　　　　　　　　　　

<强>二,js部分

微信小程序在开发起来,个人感觉挺像vue的,以数据驱动视图的更新。所以在小程序中,不能直接操作dom,当然也不能使用jquery之类的库。

应用var=getApp ();
　　页面({
　　数据:{
　　winHeight:““,//窗口高度
　　currentTab: 0,//预设当前项的值
　　scrollLeft: 0,//标签标题的滚动条位置
　　expertList:[{//假数据
　　img:“avatar.png"
　　名称:“欢顔“,
　　标签:“知名情感博主“,
　　答:134年,
　　听:2234
　　})
　　},//滚动切换标签样式
　　switchTab:函数(e) {
　　this.setData ({
　　currentTab: e.detail.current
　　});
　　this.checkCor ();
　　},//点击标题切换当前页时改变样式
　　swichNav:函数(e) {
　　var cur=e.target.dataset.current;
　　如果(this.data.currentTaB==cur){返回false;}
　　其他{
　　this.setData ({
　　currentTab:坏蛋
　　})
　　}
　　},//判断当前滚动超过一屏时,设置标签标题滚动条。
　　checkCor:函数(){
　　如果(this.data.currentTab> 4) {
　　this.setData ({
　　scrollLeft: 300
　　})
　　其他}{
　　this.setData ({
　　scrollLeft: 0
　　})
　　}
　　},> .tab-h {
　　身高:80 rpx;宽度:100%;box-sizing: border-box;溢出:隐藏;行高:80 rpx;背景:# F7F7F7;字体大小:16 px;空白:nowrap;}:固定;:0;左:0;z - index: 99;}
　　.tab-item{保证金:0 36 rpx;显示:inline-block;}
　　.tab-item。活跃的{颜色:# 4675 f9;位置:相对;}
　　.tab-item。活动:在{内容:““显示:块;高度:8 rpx;宽度:52 rpx;背景:# 4675 f9;位置:绝对;底部:0;左:5 rpx; border - radius: 16 rpx;}
　　.item-ans{宽度:100%,显示:flex;flex-grow:行no-wrap; justify-content:之间的空间;填充:30 rpx; box-sizing: border-box;身高:180 rpx;对齐项目:中心;边界底部:1 px固体# F2F2F2;}
　　.avatar{宽度:100 rpx;高度:100 rpx;位置:相对;padding-right: 30 rpx;}
　　.avatar img{宽度:100%;高度:100%;}
　　.avatar .doyen{宽度:40 rpx;高度:40 rpx;位置:绝对的,底部:2 px;右:20 rpx;}
　　.expertInfo{字体大小:12 px; flex-grow: 2;颜色:# B0B0B0;行高:1.5 em;}
　　.expertInfo . name{字体大小:16 px;颜色:# 000;margin-bottom: 6 px;}
　　.askBtn{宽度:120 rpx;高度:60 rpx;行高:60 rpx; text-align:中心;字体大小:14 px;border - radius: 60 rpx;边界:1 px固体# 4675 f9;颜色:# 4675 f9;}
　　.tab-content {margin-top: 80 rpx;}
　　null小程序开发中如何利用选项卡实现一个滚动选项卡