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

实现思路:

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

代码:

1.index.wxml

<!--index.wxml-->
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="" bindtap="swichNav">电影</view>
<view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="" 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: %;
text-align: center;
line-height: 80rpx;
background-color:white;
} .swiper-tab-list {
font-size: 30rpx;
display: inline-block;
width: %;
color: #;
border-bottom: 0rpx;
} .on {
color: #da7c0c;
border-bottom: 2rpx solid #da7c0c;
} .swiper-box {
display: block;
height: %;
width: %;
overflow: hidden;
} .swiper-box view {
text-align: center;
}

3.index.js

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

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

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

微信小程序开发之选项卡的更多相关文章

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

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

  2. 微信小程序开发入门与实践

    基础知识---- MINA 框架 为方便微信小程序开发,微信为小程序提供了 MINA 框架,这套框架集成了大量的原生组件以及 API.通过这套框架,我们可以方便快捷的完成相关的小程序开发工作. MIN ...

  3. 微信小程序开发心得

    微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受. 首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司 ...

  4. 【微信小程序开发•系列文章六】生命周期和路由

    这篇文章理论的知识比较多一些,都是个人观点,描述有失妥当的地方希望读者指出. [微信小程序开发•系列文章一]入门 [微信小程序开发•系列文章二]视图层 [微信小程序开发•系列文章三]数据层 [微信小程 ...

  5. 微信小程序开发日记——高仿知乎日报(下)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  6. 微信小程序开发日记——高仿知乎日报(中)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...

  7. 微信小程序开发日记——高仿知乎日报(上)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...

  8. 微信小程序开发工具测评

    1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下 ...

  9. 微信小程序开发工具的数据,配置,日志等目录在哪儿? 怎么找?

    原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=359 本文由本站halfyawn原创:感谢原创者:如有疑问,请在评论内回复   ...

随机推荐

  1. UWP 应用程序内购

    今天来说一下应用程序内购的问题,这里面有坑,给自己做个笔记,也给需要的人提个醒. 我目前的需要是可以允许用户捐赠赞助App的形式内购,最终效果如下 只讲上面的列表部分,下面的就是图片布局啥的,没意思了 ...

  2. The requested URL / was not found on this server——Apache配置虚拟域名后无法访问localhost

    今天为了做项目,在Apache中配置了项目域名,成功访问.但是忽然发现要访问localhost突然出现The requested URL / was not found on this server. ...

  3. Hibernate框架进阶(下篇)之查询

    导读 Hibernate进阶篇分为上中下三篇,本文为最后一篇,主要内容是Hibernate框架的查询,主要包括hql语句查询,criteria查询以及查询策略的选择. 知识框架 Hibernate查询 ...

  4. SpringBoot入门

    简介 从本质上来说,Spring Boot就是Spring,它做了那些没有它你也会去做的Spring Bean配置.它使用"习惯优于配置"(项目中存在大量的配置,此外还内置了一个习 ...

  5. 【SICP练习】151 练习4.7

    练习4-7 原文 Exercise 4.7. Let* is similar to let, except that the bindings of the let variables are per ...

  6. Ration Rose2003安装及破解

    曾经学习UML的时候,用的是EA. 近期在看Head First想着画绘图装一下Ration Rose吧.于是就着手開始装.本来网上关于Ration Rose的安装及破解教程非常多,可是我在安装的过程 ...

  7. Struts2 2.5.12的问题

    使用maven搭建的Struts项目,使用Struts 2.5.12会启动报错,应该不是包冲突的问题,感觉是lang3.jar的问题,换回2.5.10.1就没事了. 这点挺奇怪的,不应该是jar包损坏 ...

  8. Python爬虫(二十四)_selenium案例:执行javascript脚本

    本章叫介绍如何使用selenium在浏览器中使用js脚本,更多内容请参考:Python学习指南 隐藏百度图片 #-*- coding:utf-8 -*- #本篇将模拟执行javascript语句 fr ...

  9. 深入理解计算机系统_3e 第五章家庭作业 CS:APP3e chapter 5 homework

    5.13 A. B. 由浮点数加法的延迟,CPE的下界应该是3. C. 由整数加法的延迟,CPE的下界应该是1. D. 由A中的数据流图,虽然浮点数乘法需要5个周期,但是它没有"数据依赖&q ...

  10. MyBatis_查询缓存01

    一.查询缓存 查询缓存的使用,主要是为了提高查询访问速度.将用户对同一数据的重复查询过程简单化,不在每次均从数据库中查询获取结果数据,从而提高访问速度. MyBatis的查询缓存机制,根据缓存区的作用 ...