小程序实现tab更换页面效果
作者:小雅雅家的小凯凯吖 发布时间:2024-04-16 09:32:28
标签:小程序,tab,更换
本文实例为大家分享了小程序实现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="" data-item="{{ip}}">
{{ip.title}}
</view>
</block>
<view class="ip_tab_comtainer_padd"></view>
</scroll-view>
<view class='content'>
<block>
<view class="content1" wx:if="{{content=='日统计'}}">{{content}}</view>
<view class="content2" wx:if="{{content=='月统计'}}">{{content}}</view>
<view class="content3" wx:if="{{content=='年统计'}}">{{content}}</view>
</block>
</view>
.wxss
page{
width: 100%;
height: 100%;
}
.ip_tab_comtainer {
width: 100%;
background-color: #F5F5F5;
padding: 20rpx 0 0;
white-space: nowrap;
}
.ip_tab_comtainer_padd {
display: inline-block;
width: 5%;
}
.ip_tab_item_s {
width: 30%;
display: inline-block;
line-height: 40rpx;
text-align: center;
color: #91daf9;
font-size: 28rpx;
overflow: hidden;
background-color: #ffffff;
border: 1px solid #91daf9;
}
.ip_tab_item_n {
width: 30%;
display: inline-block;
text-align: center;
line-height: 40rpx;
color: #353535;
background-color: #ffffff;
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%;
height: 100%;
display: flex;
background-color: #CCCCCC;
}
.content1{
width: 100%;
height: 100%;
display: flex;
background-color: #6b10e0;
}
.content2{
width: 100%;
height: 100%;
display: flex;
background-color: #d41515;
}
.content3{
width: 100%;
height: 100%;
display: flex;
background-color: #1ac729;
}
.js
/**
* 页面的初始数据
*/
data: {
ips: [
{ id: "1", title: "日统计", isSelect:true },
{ id: "2", title: "月统计", isSelect: false},
{ id: "3", title: "年统计", isSelect: false},
],
content: "日统计"
},
/**
* 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,
});
},
来源:https://blog.csdn.net/w_s_x_b/article/details/108382446
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 前言:本篇基于Python3环境,Python2环境下的range会有所不同,但并不影响我们使用。1、range()函数是什么?range(
- 通常,会话管理是通过服务器将 Session ID 作为一个 cookie 存储在用户的 Web 浏览器中来唯一标识每个用户会话。如果浏览器
- 本文实例为大家分享了vue实现购物车加减的具体代码,供大家参考,具体内容如下通常我们会在模板中绑定表达式,模板是用来描述视图结构的。如果模板
- 首先感谢比尔、感谢微软、感谢MSDN,是他们让我看到他们富有创意的一面,好了好了不废话了。我们经常把多个CSS或者多个JS并成一个,以节省请
- 电脑安装git客户端、注册github账号并登陆到本地项目文件夹右键选择git bash here输入个人信息(代码提交者)git conf
- 1。在Asp页面首部<head>加入 Response.Buffer =
- 一、python pip的安装与使用1、pip 是 Python 包管理工具,该工具提供了对Python 包的查找、下载、安装、卸载的功能。
- 字符串函数ASCII(str) 返回字符串str的第一个字符的ASCII值(str是空串时返回0) my
- 本文主要介绍了数据处理方面的内容,希望大家仔细阅读。一、数据分析得到了以下列字符串开头的文本数据,我们需要进行处理二、回滚我们需要对http
- 从视频中提取音频安装 moviepypip install moviepy相关代码:audio_file = work_path +
- IIf 函数 根据表达式的值,来返回两部分中的其中一个。语法IIf(expr, truepart, fal
- 绘制一个菱形四边形,边长为 200 像素。方法1和2绘制了内角为60和120度的菱形,方法3绘制了内角为90度的菱形。方法1
- 要求,输入一串数字,并以列表的形式打印出来。number = input('请输入一串数字:') print(number)
- 最近开发新业务,看到有些功能一样的表格,想着封装一个组件,记录一下:最终实现效果大概实现是:封装一个通用的表格接收两个数组, 一个控制行数,
- 实例的背景说明假定一个个人信息系统,需要记录系统中各个人的故乡、居住地、以及到过的城市。数据库设计如下:Models.py 内容如下:&nb
- 长期以来一直以为iframe跟div一样都是块级元素,直到今天在一个群中看到一位朋友问到iframe怎么居中的时候,测试了下发现原来我一直对
- 你一定很熟悉Youtube了,知道它是一个视频分享网站。是的,youtube目前十分流行,你也许会常常访问。这里有一些关于youtube u
- 一.环境搭建1.下载安装包访问 Python官网下载地址:https://www.python.org/downloads/下载适合自己系统
- 本文实例讲述了python对象及面向对象技术。分享给大家供大家参考,具体如下:1 先看一个例子. 本章将讲解这个例子程序:文件: filei
- 目录一、IDEA如何连接数据库第一种方法:直接在方法体中增加连接信息方法二:二、方法代码的实现1.快递员增加快递2.快递员删除快递用数据库编