微信小程序开发之选项卡

选项卡是web开发中经常使用到的一个模块，在小程序中竟然没有，这里参考别人的文章自己做了一个双选项卡

实现思路：

通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是否显示)，达到切换展示电影和游戏的目的

代码：

1.index.wxml

<!--index.wxml-->
<view class="swiper-tab"><view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">电影</view><view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">游戏</view>
</view><view class="weui-cells__title" hidden="{{!isShow}}">电影列表</view>
<view class="weui-cells__title" hidden="{{isShow}}">游戏列表</view>

2.index.wxss

.swiper-tab {width: 100%;text-align: center;line-height: 80rpx;background-color:white;
}.swiper-tab-list {font-size: 30rpx;display: inline-block;width: 50%;color: #777;border-bottom: 0rpx;
}.on {color: #da7c0c;border-bottom: 2rpx solid #da7c0c;
}.swiper-box {display: block;height: 100%;width: 100%;overflow: hidden;
}.swiper-box view {text-align: center;
}

3.index.js

//index.js
//获取应用实例
var app = getApp()
Page( {data: {isShow: true,currentTab: 0,},swichNav: function (e) {if (this.data.currentTab === e.target.dataset.current) {return false;} else { var showMode = e.target.dataset.current == 0;this.setData({currentTab: e.target.dataset.current,isShow: showMode})}},
})

参考文章：http://blog.csdn.net/qq_31383345/article/details/52900835

欢迎阅读本系列文章：微信小程序开发教程目录

微信小程序开发之选项卡相关推荐

微信小程序开发之选项卡(窗口顶部TabBar)页面切换
微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml [html] vie ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
uniapp手写_【转】uni-app框架纯手写微信小程序开发左侧滑动菜单
本帖最后由 fengrui99 于 2020-7-22 14:38 编辑原文来自:在学习的uni-app的微信小程序开发路上慢慢开始不一直依赖插件(但是使用插件是真的香,一直用一直香) 在大佬的指引 ...
uniapp手写_uni-app框架纯手写微信小程序开发左侧滑动菜单
原来到最后才发现有些东西,没有就真的没有.不行,就真的不行唠叨一会在学习的uni-app的微信小程序开发路上慢慢开始不一直依赖插件(但是使用插件是真的香,一直用一直香),在大佬的指引下学会自己去写 ...
微信小程序开发uni-app 跨域处理服务器搭建仓库 VueX tabBar
一.uni-app简介官网:https://uniapp.dcloud.io/ PC端:移动端:(APP,WebApp):纯原生:(IOS,Android ) 应用商店:H5 Hybrid 模式(混 ...
微信小程序开发工具调试界面鼠标看不见
微信小程序开发工具调试界面鼠标看不见参考该贴<模拟鼠标消失> 解决方法: 打开"控制面板",在右上角搜索"鼠标" 点击"鼠标" ...
微信小程序开发的完整流程介绍，新手必读
自从跳一跳小程序游戏出现后,一夜之间,小程序就变得家喻户晓了,功能开发也越来越丰富,在微信搜一搜就会发现许多大品牌早已有自己的小程序了,越来越多的企业和商家都看中了这个风口,想快速开发出一款属于自己的 ...
微信小程序开发（2）_data属性
假设我们的环境都做好了,现在我们开始开发自己的小程序首先我们开发出自己的 Hello World 我们要做的事情是当前点击hello World的时候HelloWorld的颜色发生变化: 这个是我们 ...
微信小程序开发优秀教程及文章合集第一期
2019独角兽企业重金招聘Python工程师标准>>> 我会不定期的选取一些优质教程,整理成辑,以便大家集中阅读: 新手向!微信小程序开发手记系列: 微信小程序开发手记<一&g ...

微信小程序开发之选项卡

欢迎阅读本系列文章：微信小程序开发教程目录

微信小程序开发之选项卡相关推荐

最新文章

热门文章