选项卡在我们的日常开发中,使用的还是蛮多的,但是微信小程序中却没有直接提供选项卡组件,不过我们可以变通通过 scroll-viewswiper 组件来实现一个选项卡的功能。

需求:

实现一个选项卡,选项卡的标题可能会比较多,当超过一屏时,需要可以滚动显示。选项卡的内容需要左右滑动显示。

实现思路:

1、标题较多,使用 scroll-view 组件来显示即可。
    2、内容滑动,使用 swiper 组件来显示。

效果图:

代码实现:

1、页面布局 tabs.wxml 文件的编写

<view>
<scroll-view scroll-x="{{true}}" class='top-nav-container' scroll-left="{{scrollLeft}}">
<block wx:for="{{topNavs}}" wx:key='{{*this}}'>
<view class='tab-item {{currentActiveNavIndex == index ? "active":""}}' data-current-index='{{index}}' bindtap='topNavChange'>
{{item}}
</view>
</block>
</scroll-view>
<swiper bindchange="swiperChange" class='swiper-container' current='{{currentActiveNavIndex}}' bindtouchmove="touchmove">
<block wx:for="{{topNavs}}" wx:key='{{*this}}'>
<swiper-item style="overflow:scroll">
<view>{{item}}</view>
</swiper-item>
</block>
</swiper>
</view>

注意:

           1、scroll-view scroll-x=true 表示开启横向滚动

           2、scroll-view scroll-left 表示表示横向滚动条的位置

           3、swiper 组件中的 current 表示当前所在滑块的 index,给这个变量赋值,可以直接滑动到这一屏。

2、样式编写 tabs.wxss 文件的编写

.top-nav-container{
width: 100%;
height: 60rpx;
line-height: 60rpx;
font-size: 14px;
background-color: #CCC;
vertical-align: middle;
white-space: nowrap;
} .top-nav-container .tab-item{
display: inline-block;
margin: 0rpx 30rpx;
} .top-nav-container .tab-item.active{
color: rgb(48, 121, 255);
border-bottom: 4rpx solid #F00;
line-height: 52rpx;
} .swiper-container{
height: calc(100vh - 60rpx);
background-color: #00b26a;
font-size: 14px;
}

3、js 控制 tabs.js 文件的编写

Page({
data: {
/**
* 导航数据
*/
topNavs: ['直播', '推荐', '世界杯', '生活', '萌宠', '娱乐', '游戏', '常用', '11111', '22222', '3333', '4444', '5555', '6666'],
/**
* 当前激活的当航索引
*/
currentActiveNavIndex: 0,
/**
* 上一个激活的当航索引
*/
prevActiveNavIndex: -1,
/**
* scroll-view 横向滚动条位置
*/
scrollLeft: 0
},
/**
* 顶部导航改变事件,即被点击了
* 1、如果2次点击同一个当航,则不做处理
* 2、需要记录本次点击和上次点击的位置
*/
topNavChange: function(e) {
var nextActiveIndex = e.currentTarget.dataset.currentIndex,
currentIndex = this.data.currentActiveNavIndex;
if (currentIndex != nextActiveIndex) {
this.setData({
currentActiveNavIndex: nextActiveIndex,
prevActiveNavIndex: currentIndex
});
}
},
/**
* swiper滑动时触发
* 1、prevIndex != currentIndex 表示的是用手滑动 swiper组件
* 2、prevIndex = currentIndex 表示的是通过点击顶部的导航触发的
*/
swiperChange: function(e) {
var prevIndex = this.data.currentActiveNavIndex,
currentIndex = e.detail.current;
this.setData({
currentActiveNavIndex: currentIndex
});
if (prevIndex != currentIndex) {
this.setData({
prevActiveNavIndex: prevIndex
});
}
this.scrollTopNav();
},
/**
* 滚动顶部的导航栏
* 1、这个地方是大致估算的
*/
scrollTopNav: function() {
/**
* 当激活的当航小于4个时,不滚动
*/
if (this.data.currentActiveNavIndex <= 3 && this.data.scrollLeft >= 0) {
this.setData({
scrollLeft: 0
});
} else {
/**
* 当超过4个时,需要判断是向左还是向右滚动,然后做相应的处理
*/
var plus = this.data.currentActiveNavIndex > this.data.prevActiveNavIndex ? 60 : -60;
this.setData({
scrollLeft: this.data.scrollLeft + plus
});
}
console.info(this.data.currentActiveNavIndex, this.data.prevActiveNavIndex, this.data.scrollLeft);
}
})

    注意:

          1、 需要注意的地方可以看代码中的注释

完整代码:

选项卡代码:https://gitee.com/huan1993/weixin_mini_program_study/tree/master/pages/tabs

微信小程序实现tabs选项卡的更多相关文章

  1. 微信小程序开发之选项卡

    选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡 实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...

  2. 微信小程序-滚动Tab选项卡

    前言:今天呢 给大家详细讲解一下滚动Tab选项卡:左右可滑动切换的效果,希望对大家做项目时候有用! 以前也遇到过这个,但是没有做记录.转载来源于:https://www.jianshu.com/p/9 ...

  3. NO--19 微信小程序之scroll-view选项卡与跳转(二)

    本篇为大家介绍为何我们在最后做交互的时候,并没有使用上一篇讲的选项卡的效果.   scroll-view与跳转.gif (如无法查看图片,还请翻看上一篇!) 大家注意看,在我点击跳转后,首先能看到的是 ...

  4. 微信小程序滚动Tab选项卡:左右可滑动切换

    最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当 ...

  5. NO--15 微信小程序,scroll-view选项卡和跳转

    大多数的商城类小程序都有这个功能,点击“全部订单”,“待付款”,“待发货”,“待收货”,“已完成”,会跳转页面且跳至与之相对应的选项卡中.所以我们在开发该小程序时也做了相同的功能.如下图:   scr ...

  6. 转载【微信小程序】:微信小程序滚动Tab选项卡:左右可滑动切换(仿某宝)

    1.本文转载至:http://blog.csdn.net/sophie_u/article/details/71745125 2.效果: 3.最终效果如上.问题: 1).tab标题总共8个,所以一屏无 ...

  7. 微信小程序选项卡功能

    首先看看微信小程序上的选项卡的效果 原理呢,就是先布局好(这就不必说了吧),然后在上面的每一个选项卡上都定义一个同样的点击事件,然后给每一个组件上绑定一个唯一的标识符,然后点击事件触发的时候,获取到绑 ...

  8. 微信小程序开发教程目录

    本系列教程是自己在工作中使用到而记录的,没有顺序之分 如有错误之处,请给与指正,也不希望误导了别人 微信小程序开发教程目录 微信小程序之注册和入门 微信小程序之HTTPS请求 微信小程序开发之选项卡 ...

  9. 微信小程序学习指南

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

随机推荐

  1. dotnet 读 WPF 源代码笔记 渲染收集是如何触发

    在 WPF 里面,渲染可以从架构上划分为两层.上层是 WPF 框架的 OnRender 之类的函数,作用是收集应用程序渲染的命令.上层将收集到的应用程序绘制渲染的命令传给下层,下层是 WPF 的 GF ...

  2. 修改statefulset 有些不允许直接修改

    1.比如修改一个storageClassName: hostpath   会报错 意思是除了 'replicas', 'template',  'updateStrategy'   其他部分都是不可以 ...

  3. WPF 通过进程实现异常隔离的客户端

    当 WPF 客户端需要实现插件系统的时候,一般可以基于容器或者进程来实现.如果需要对外部插件实现异常隔离,那么只能使用子进程来加载插件,这样插件如果抛出异常,也不会影响到主进程.WPF 元素无法跨进程 ...

  4. 一文带你了解.Net读写锁

    本文主要讲解.Net基于ReaderWriterLockSlim讲解读写锁 基础概念 读写锁是一个具有特殊用途的线程锁,适用于频繁读取且读取需要一定时间的场景,共享资源的读取操作通常是可以同时执行的, ...

  5. PHP方法参数的那点事儿

    在所有的编程语言中,方法或者函数,都可以传递一些参数进来进行业务逻辑的处理或者计算.这没什么可说的,但是在PHP中,方法的参数还有许多非常有意思的能力,下面我们就来说说这方面的内容. 引用参数 涉及到 ...

  6. python学习笔记(八)-模块

    大型python程序以模块和包的形式组织.python标准库中包含大量的模块.一个python文件就是一个模块.1.标准模块 python自带的,不需要你安装的2.第三方模块 需要安装,别人提供的. ...

  7. cgroup之cpu关键参数

    cpu.cfs_period_us specifies a period of time in microseconds (µs, represented here as "us" ...

  8. 关于open falcon 与nightingale 的一些调研

    针对 open-falcon 与 nightingale 的调研 一.open-falcon 1.1 组件介绍 1.1.1 agent > agent用于采集机器负载监控指标,比如cpu.idl ...

  9. IE浏览器设置兼容性

    因为IE浏览器不兼容高版本的Jquery.Bootstrap等JS框架,导致页面在Google浏览器和在IE的显示完全不一样,所以需要对页面进行兼容性设置 <!--设置兼容性--> < ...

  10. iOS 15 无法弹出授权弹框之解决方案---Your app uses the AppTrackingTransparency framework, but we are unable to locate the App Tracking Transparency permission request when reviewed on iOS 15.0

    2021年9月30日下午:我正愉快的期盼着即将到来的国庆假期,时不时刷新下appstoreconnect的网址,28号就提上去的包,今天还在审核中....由于这个版本刚升级的xcode系统和新出的iO ...