微信小程序实现tab页面切换功能

wxml
<scroll-view scroll-x="true" class="ip_tab_comtainer">
<view class="ip_tab_comtainer_padd"></view>
<block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip.id}}">
<view class="{{ip.isSelect?'ip_tab_item_s':'ip_tab_item_n'}}" bindtap="onIpItemClick" wx:key="{{ip.id}}" data-item="{{ip}}">
{{ip.title}}
</view>
</block>
<view class="ip_tab_comtainer_padd"></view>
</scroll-view>
<view class='content'>
{{content}}
</view>
wxss
.ip_tab_comtainer {
width: 100%;
background-color: #F5F5F5;
padding: 20rpx 0 0;
white-space: nowrap;
}
.ip_tab_comtainer_padd {
display: inline-block;
width: 24rpx;
}
.ip_tab_item_s {
display: inline-block;
line-height: 40rpx;
padding: 12rpx 32rpx;
color: #91daf9;
margin-right: 8rpx;
margin-left: 8rpx;
font-size: 28rpx;
overflow: hidden;
background-color: #ffffff;
border: 1px solid #91daf9;
}
.ip_tab_item_n {
display: inline-block;
padding: 12rpx 32rpx;
line-height: 40rpx;
color: #353535;
margin-right: 8rpx;
background-color: #ffffff;
margin-left: 8rpx;
font-size: 28rpx;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 4rpx;
border: 1px solid #CCCCCC;
}
/**
去除横向滚动条
*/
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.content{
width: 100%;
}
js
// pages/horizontal-scroll_tab/horizontal-scroll_tab.js
Page({
/**
* 页面的初始数据
*/
data: {
ips: [
{ id: "1", title: "日统计", isSelect:true },
{ id: "2", title: "月统计", isSelect: false},
{ id: "3", title: "年统计", isSelect: false},
],
content:"全部"
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* item点击事件
*/
onIpItemClick: function (event) {
console.log(event);
var id = event.currentTarget.dataset.item.id;
var curIndex = 0;
for (var i = 0; i < this.data.ips.length; i++) {
if (id == this.data.ips[i].id) {
this.data.ips[i].isSelect = true;
curIndex = i;
} else {
this.data.ips[i].isSelect = false;
}
}
this.setData({
content: this.data.ips[curIndex].title,
ips: this.data.ips,
});
},
})
微信小程序实现tab页面切换功能的更多相关文章
- 微信小程序:选项卡页面切换
一.功能描述 在同一个页面内实现不同展示页面的切换功能,如下图所示 二.代码实现 1. index.js Page({ /** * 页面的初始数据 */ data: { currentData : 0 ...
- 微信小程序写tab切换
微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view ...
- 记录使用微信小程序的NFC和蓝牙功能读取15693芯片的开发历程
开发目标: (1) 对于Android手机,直接通过微信小程序调用手机的NFC功能,对15693协议的芯片进行读写操作: (2)对于苹果手机(及没有NFC模块的手机),通过微信小程序的蓝牙功能连接到蓝 ...
- 基于微信小程序的用户列表点赞功能
代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...
- Java Web项目,Android和微信小程序的初始页面配置
Java Web项目 我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发 ...
- 微信小程序滚动tab的实现
微信小程序滚动tab的实现 1.目的:为了解决滚动版本的tab,以及实现虹吸效果. 2.方案:自己动手写了一个Demo,用于测试实现如上的效果.其代码有做参考,在这里先声明.具体的参照如下:重庆大学二 ...
- (十二)微信小程序实现登陆页面+登陆逻辑
微信小程序实现登陆页面 实现上面两个页面 第一个页面 <view> <!-- 上侧部分 --> <view class="top-view"> ...
- 完整微信小程序授权登录页面教程
完整微信小程序授权登录页面教程 1.前言 微信官方对getUserInfo接口做了修改,授权窗口无法直接弹出,而取而代之是需要创建一个button,将其open-type属性绑定getUseInfo方 ...
- 微信小程序滚动Tab选项卡:左右可滑动切换
最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当 ...
随机推荐
- generate the call load file
#!/usr/bin/perl -w $e911_call_percent = 0.0; $ims_node_number = 12; $local_ip = "10.86.52.2&quo ...
- ATL中宏定义offsetofclass的分析
近日学习ATL,通过对宏定义offsetofclass的解惑过程.顺便分析下虚函数表,以及通过虚函数表调用函数的问题. 1 解开ATL中宏定义offsetofclass的疑惑 #define _ATL ...
- MountService整理
刚毕业时第一个接触的模块就是Vold.这个模块尽管小,但深入下去是有一定难度的. 花了点时间又一次整理了下这一块的逻辑,也当温习下这个模块. watermark/2/text/aHR0cDovL2Js ...
- Ubuntu 安装软件和centos 对比命令
之前都是使用Redhat 或者Centos 等rpm的linux ,开始使用ubuntu 很不习惯 1. 安装命令Centos : yum install httpd ...
- Chromium Graphics: HW Video Acceleration in Chrom{e,ium}{,OS}
HW Video Acceleration in Chrom{e,ium}{,OS} Ami Fischman <fischman@chromium.org> Status as of 2 ...
- javaScript call与apply学习笔记
call和apply是借用他人的函数实现自己到功能,具体表现在改变this指向,借用他人方法 而不同的地方是call是把实参按照形参的个数传入,而apply传入的是一个数组(argument) 写一个 ...
- Svn备份与Bandizip压缩批处理程序
目的:为了定时备份多个svn仓库数据,使用批处理程序进行备份并Bandizip进行压缩保存到指定位置,操作完成后弹出成功提示. 为了完成以上目标,需要了解以下几个方面: 批处理命令 Svn命令 Ban ...
- Copying GC (Part one)
目录 GC复制算法 copy()函数 将传递给自己的参数复制,然后递归复制其孩子 new_obj()函数 执行过程 缺点 Cheney的GC复制算法 copy()函数 执行过程 被隐藏的队列 优缺点 ...
- Windows操作系统下将Redis安装为服务
安装服务: E:/Redis/Redis-x64-3.2.100/redis-server.exe --service-install E:/Redis/Redis-x64-3.2.100/redis ...
- BZOJ——T 3732: Network
http://www.lydsy.com/JudgeOnline/problem.php?id=3732 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: ...