选项卡是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. js屏蔽广告

    最近遇到有些广告的问题,首先是在手机端,可能是用户访问了一些小网站的,(你懂得),然后在访问我的网站时,会带小广告过来,通常是wifi被dns劫持的情况下导入到广告脚本, 1.处理这些要知道广告的根源 ...

  2. C语言socket编程----实现UDP通信

    TCP/IP协议叫做传输控制/网际协议,又叫做网络通信协议.实际上,它包括上百个功能的协议. 套接字(socket):在网络中用来描述计算机中不同程序与其他计算程序的通信方式. 套接字分为三类; 流式 ...

  3. mybatis中使用if标签比较两个字符串是否相等

    <!-- 此处使用if比较是否相等 --> 范例一: <select id="findClientIds" parameterType="map&quo ...

  4. NodeJS爬虫入门

    1. 写在前面 往常都是利用 Python/.NET 语言实现爬虫,然现在作为一名前端开发人员,自然需要熟练 NodeJS.下面利用 NodeJS 语言实现一个糗事百科的爬虫.另外,本文使用的部分代码 ...

  5. springBoot系列教程02:mongodb的集成及使用

    1.安装mongodb mongdb的安装很简单,只需要下载解压后运行mongod就好了 wget https://fastdl.mongodb.org/linux/mongodb-linux-x86 ...

  6. flask_login 整合 pyjwt + json 简易flask框架

    现在很多框架都实现前后端分离,主要为了适应以下几个目的: 1,前后端的分离,可以使前端开发和后端开发更加分工明确,而不是后端还需要在视图模板中加入很多{% XXXX %}标签 2,是为了适应跨域调用或 ...

  7. KafkaManager中Group下不显示对应Topic的解决方案

    一.软件版本 Kafka:0.8.2.1 KafkaManager:1.2.9.10 二.问题现象 点击Consumer下某个组,显示如下图所示的异常,查看KafkaManager的Applicati ...

  8. Qt之QHeaderView加入复选框

    简述 前面分享了QTableView中怎样加入复选框. 本节主要介绍QTableView中的表头-QHeaderView加入复选框的功能,以下以水平表头为例.垂直表头相似! 简述 效果 QHeader ...

  9. Jsp制作验证码

    验证码 验证码(CAPTCHA)是"Completely Automated Public Turing test to tell Computers and Humans Apart&qu ...

  10. ERR Unsupported CONFIG parameter: notify-keyspace-events; nested exception is redis.clients.jedis.exceptions.JedisDataException

    异常信息 时间:2017-04-05 15:53:57,361 - 级别:[ WARN] - 消息: [other] The web application [ROOT] appears to hav ...