一、前言

小程序开发中,有很多封装好的控件供开发者使用,但是,很常见的tab选项卡居然没有,只能自己搞一个。

实现原理也很简单,无非是用给view(tab)设置一个点击事件bintap,并且给view(tab)一个data-idx索引,根据当前index来改变tab的状态并决定swiper显示那个内容,改变swiper的内容只需要改变swiper的current就好。

二、效果

三、实现

wxml

<view class='ticket-container'>
<scroll-view scroll-y bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}"
scroll-top="{{scrollTop}}">
<!--Tab布局-->
<view class='title'>
<view class="{{0 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='0'>
<text>未使用</text>
<hr class="line-style"/>
</view> <view class="{{1 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='1'>
<text>已使用</text>
<hr class="line-style"/>
</view>
<view class="{{2 == currentIndex ? 'title-sel-selected' : 'title-sel'}}" bindtap='titleClick' data-idx='2'>
<text>已过期</text>
<hr class="line-style" />
</view>
</view> <!--内容布局-->
<swiper class='swiper' bindchange='pagechange' current='{{currentIndex}}'>
<swiper-item class='swiper'>
<view wx:for="{{firstList}}" wx:for-item="item" class='record-item'>
<view class='name'>
<span>名称:{{item.name}}</span>
<span>面额:{{item.money}}</span>
</view>
</view>
</swiper-item>
<swiper-item class='swiper' class='swiper'>
<view wx:for="{{secondList}}" wx:for-item="item" class='record-item'>
<view class='name'>
<span>名称:{{item.name}}</span>
<span>面额:{{item.money}}</span>
</view>
</view>
</swiper-item>
<swiper-item class='swiper' class='swiper'>
<view wx:for="{{thirdList}}" wx:for-item="item" class='record-item'>
<view class='name'>
<span>名称:{{item.name}}</span>
<span>面额:{{item.money}}</span>
</view>
</view>
</swiper-item>
</swiper>
</scroll-view>
</view>

js文件

// pages/mine/mine.js
Page({ /**
* 页面的初始数据
*/
data: {
currentIndex: 0,
"firstList": [{ name: 'w券1', money: '5.00' }, { name: 'w券2', money: '50.00'}],
"secondList": [{ name: 'y券1', money: '10.00' }, { name: 'y券2', money: '20.00' }],
"thirdList": [{ name: 'g券1', money: '30.00' }, { name: 'g券2', money: '40.00' }],
}, //swiper切换时会调用
pagechange: function (e) {
if ("touch" === e.detail.source) {
let currentPageIndex = this.data.currentIndex
currentPageIndex = (currentPageIndex + 1) % 3
this.setData({
currentIndex: currentPageIndex
})
}
},
//用户点击tab时调用
titleClick: function (e) {
let currentPageIndex =
this.setData({
//拿到当前索引并动态改变
currentIndex: e.currentTarget.dataset.idx
})
} })

wxss文件

.container {
height: 100%;
min-height: 100%;
display: flex;
flex-direction: column;
box-sizing: border-box;
} .title {
width: 100%;
height: 88rpx;
background: white;
display: flex;
align-items: center;
justify-content: space-around;
} .title-sel {
color: #24272c;
font-size: 32rpx;
display: flex;
flex-direction: column;
align-items: center;
} .title-sel .line-style{
background: #fff;
height: 6rpx;
width: 40rpx;
position: relative;
margin-top: 10rpx;
} .title-sel-selected{
color: #006bff;
font-size: 32rpx;
display: flex;
flex-direction: column;
align-items: center;
}
.title-sel-selected .line-style{
background: #006bff;
height: 6rpx;
width: 90rpx;
position: relative;
margin-top: 10rpx;
} .swiper {
width: 90%;
flex: 1;
overflow: scroll;
margin: 0 auto;
} .record-item {
margin-top: 10rpx;
background-color: white;
padding-bottom: 5rpx;
padding-top: 5rpx;
font-size: 30rpx;
} .name{
display: flex;
justify-content: space-between;
border: 1px solid #eee;
padding: 2vh;
border-radius: 10rpx
}

四、参考官方文档

那么当内容改变时,我们也要改变tab选项卡的状态,这时候我们给swiper来一个bindchange,同样是官方文档

【微信小程序】微信小程序-实现tab的更多相关文章

  1. 微信小程序横版日历,tab栏

    代码地址如下:http://www.demodashi.com/demo/14243.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  2. 微信小程序基于swiper组件的tab切换

    代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  3. 微信小程序 微信支付

    微信小程序前端自处理: //时间戳 timeStamp() { return parseInt(new Date().getTime() / 1000) + '' }, //随机数 randomStr ...

  4. 微信小程序——智能小秘“遥知之”源码分享(语义理解基于olami)

    微信小程序智能生活小秘书开发详解 >>>>>>>>>>>>>>>>>>>>> ...

  5. 微信公众号支付|微信H5支付|微信扫码支付|小程序支付|APP微信支付解决方案总结

    最近负责的一些项目开发,都用到了微信支付(微信公众号支付.微信H5支付.微信扫码支付.APP微信支付).在开发的过程中,在调试支付的过程中,或多或少都遇到了一些问题,今天总结下,分享,留存. 先说注意 ...

  6. 微信小程序+“芝麻小客服”可设自动关注公众号,助力运营闭环

    微信小程序全面上线已经接近1年的时间,从最初的"用完即走"理念到2017年总计更新开放60余次的功能创新,微信小程序不一定会爆发下一次的红利,但绝对是微信生态中重要的一环. 芝麻小 ...

  7. 微信小程序—微信自动退款

    微信小程序—微信自动退款 一.业务背景 微信自动退款串接基于酷客多小程序商城系统,为方便财务人员进行订单退款而开发,将酷客多小程序系统财务退款流程和微信退款系统打通.实现一个系统管理运营. 二.业务流 ...

  8. 玩玩小程序:使用 WebApi 交互打造原生的微信小程序 - 图灵小书架

    使用 WebApi 交互打造原生的微信小程序 - 图灵小书架 目录 介绍 源码地址 扫一扫体验 代码分析 其它相关信息(互联网搜集) 介绍 定时抓取图灵社区官网的首页.最热.推荐和最新等栏目的相关图书 ...

  9. 微信小程序+微信管理后台+微信用户前台

    代码地址如下:http://www.demodashi.com/demo/15043.html #### 微信小程序+微信管理后台+微信用户前台 #### 产品介绍 基础功能开发:景区微信地图导游.天 ...

  10. 浅析微信支付:微信支付简单介绍(小程序、公众号、App、H5)

    本文是[浅析微信支付]系列文章的第二篇,主要讲解一下普通商户接入的支付方式以及其中的不同之处. 上篇文章讲了本系列的大纲,没有看过的朋友们可以看一下. 浅析微信支付:前篇大纲 微信支付是集成在微信客户 ...

随机推荐

  1. Google Breakpad 在 windows下捕获程序崩溃报告

    http://blog.csdn.net/goforwardtostep/article/details/56304285

  2. pycharm窗口选项卡管理

    1.主题 我们已经注意到Pycharm的主编辑框是基于窗口选项卡机制显示的,Pycharm选项卡多种多样,这里我们将详细介绍这种选项卡机制.  2.激活的选项卡 每当我们打开一个Python文件时op ...

  3. 为mysql数据备份建立最小权限的用户

    mysqldump 备份所需要的最小权限说明: 1.对于table,mysqldump 最少要有select权限 2.如果要产生一份一致的备份,mysqldump 要有lock tables权限 3. ...

  4. 确认过眼神,看清HTTP协议

    导读:什么是 HTTP?它有什么属性?我们常用的是什么呢?快来阅读本文,将会为你一一道来. 什么是 HTTP 协议? 在了解HTTP之前,我们需要了解什么是网络通信模型(也就是我们常说的 OSI 模型 ...

  5. LR编写Socket脚本方法1(XML/16进制报文data.ws格式)

    本文主要讲述了Socket协议脚本的基础知识和编写方法,让大家能够在短时间内快速掌握简单的Socket协议脚本的编写方法.1.socket协议介绍Socket协议有万能协议之称,很多系统底层都是用的s ...

  6. 【java】SHA256加密工具

    SHA256: /** * 备用方案 SHA256加密 * @author zx */ public class SHA256Util { public static void main(String ...

  7. Spring Environment抽象

    1:概述 Spring中Environment是Spring3.1版本引入的,是Spring核心框架定义的一个接口,用来表示整个应用运行时环境.该环境模型只接受两种应用环境profiles(配置文件) ...

  8. PATB 1018. 锤子剪刀布

    时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 大家应该都会玩“锤子剪刀布”的游戏:两人同时给出手势,胜负规则如图 ...

  9. 02_javaSE面试题:单例设计模式

    还记得很多年前,面试就让在白板上写个单例模式,当时技术渣渣,还写的是class A.面试官还说,你就不能写个Singleton. 面试题 编程题:写一个Singleton示例 解析 什么是Single ...

  10. HDU 4462:Scaring the Birds(暴力枚举+状态压缩)

    http://acm.hdu.edu.cn/showproblem.php?pid=4462 题意:有一个n*n的地图,有k个空地可以放稻草人,给出每个空地可以放的稻草人属性,属性中有个R代表这个位置 ...