微信小程序切换标签改变样式
微信小程序切换标签改变样式
wxml
<!--顶部导航栏-->
<view class="swiper-tab">
<view class="tab-item {{currentTab==0 ? 'active' : ''}}" data-current="0" bindtap="swichNav">A</view>
<view class="tab-item {{currentTab==1 ? 'active' : ''}}" data-current="1" bindtap="swichNav">B</view>
<view class="tab-item {{currentTab==2 ? 'active' : ''}}" data-current="2" bindtap="swichNav">C</view>
</view>
<!--内容主体-->
<swiper class="swiper" current="{{currentTab}}" duration="400" bindchange="swiperChange">
<block wx:for="{{tabs}}" wx:key="item">
<swiper-item>
<view>{{item}}</view>
</swiper-item>
</block>
</swiper>
wxss
.swiper-tab {
display: flex;
flex-direction: row;
line-height: 60rpx;
border-bottom: 2rpx solid #777;
}
.tab-item {
width: 33.3%;
text-align: center;
font-size: 15px;
color: rgb(235, 135, 135);
}
.swiper {
width: 100%;
font-size: 100rpx;
height: 1140rpx;
background: #dfdfdf;
}
.active {
color: blue;
border-bottom: 5rpx solid blue;
}
js
Page({
data: {
// tab切换
currentTab: 0,
tabs: ["A", "B", "C"],
},
swichNav: function (e) {
// console.log(e);
var that = this;
if (this.data.currentTab === e.target.dataset.current) {
return false;
} else {
that.setData({
currentTab: e.target.dataset.current,
});
}
},
swiperChange: function (e) {
// console.log(e);
this.setData({
currentTab: e.detail.current,
});
},
});
The_End
微信小程序切换标签改变样式的更多相关文章
- 微信小程序:WXSS 样式
微信小程序:WXSS 样式 一.WXSS 样式 XSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改. 1,新增了尺寸单位: 在写 CSS 样式时,开发者需要考虑到手机设备的屏 ...
- 微信小程序wxss设置样式
微信小程序wxss设置样式 对于以前搞客户端开发的来说,有着客户端的逻辑,就是不知道怎么设置样式,把对应的控件显示出来 一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视 ...
- 微信小程序----wxss设置样式
一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...
- 微信小程序子组件样式不起作用的解决办法
今天我在编写微信小程序项目时,发现父组件引用子组件过后,子组件的样式不起作用,在上网查了很多解决办法后,成功解决了这一问题. 解决办法: 1.在全局样式文件app.wxss中引入子组件的样式,如 @i ...
- 微信小程序tabbar设置样式在哪里改
微信小程序tabbar通俗点说就是底部导航,我们一般会配置相关的菜单,方便读者快速导航.tabbar是在项目根目录中的配置文件 app.json 中进行设置:如果小程序是一个多 tab 应用(客户端窗 ...
- 微信小程序------导航栏样式、tabBar导航栏
一:导航栏样式设置 小程序的导航栏样式在app.json中定义. 这里设置导航,背景黑色,文字白色,文字内容测试小程序 app.json内容: { "pages":[ " ...
- 微信小程序全局变量改变监听
问题来源 最近工作需要写小程序页面,其中有个页面情况为:父页面中包含了一个组件页面,组件页面中又包含了另外一个组件页面.需求为:点击最后一个组件页面中的一个view,需要显示最外层父页面中的一个弹出层 ...
- 微信小程序button组件样式
点击微信按键组件才能出授权,所以自定义样式就是必须的了,来自网友的帮助,如下图 <button class='btn1' open-type='contact'> <image cl ...
- 微信小程序 open-data更改样式 open-data 显示头像 圆形
废话不多说,直接看效果: 效果一: 代码如下: <view class='zhubo'> <view class='zhuboLeft'> <view class='zh ...
随机推荐
- 一次小模块的使用过程-LC12S无线模块介绍
前言: 最近帮人做了个小设备,使用了无线模块.触摸芯片,主要功能就是把触摸按键的信号无线传到控制继电器输出,MCU是STM8系列的芯片,其中使用过程中调试无线模块LC21S觉得挺好用的,就写了这篇文章 ...
- 设计模式(十五)——命令模式(Spring框架的JdbcTemplate源码分析)
1 智能生活项目需求 看一个具体的需求 1) 我们买了一套智能家电,有照明灯.风扇.冰箱.洗衣机,我们只要在手机上安装 app 就可以控制对这些家电工作. 2) 这些智能家电来自不同的厂家,我们不想针 ...
- AC自动机(转载)
ac自动机学习博客 本来以为是很高级的算法 其实理解以后并不难 只是在字典树的基础上用fail数组标记一下回朔的位置 加速查找 就可以实现多模式串的匹配查找 模版如下: #include<cst ...
- AC自动机——看似KMP在跑,其实fail在跳
先存代码 AC自动机(简单版) #include<bits/stdc++.h> #define maxn 1000007 using namespace std; int n,ans; i ...
- 关于最小生成树 Kruskal 和 Prim 的简述(图论)
模版题为[poj 1287]Networking. 题意我就不说了,我就想简单讲一下Kruskal和Prim算法.卡Kruskal的题似乎几乎为0.(●-`o´-)ノ 假设有一个N个点的连通图,有M条 ...
- woj1019 Curriculum Schedule 输入输出 woj1020 Adjacent Difference 排序
title: woj1019 Curriculum Schedule 输入输出 date: 2020-03-19 10:43:00 categories: acm tags: [acm,woj] 水题 ...
- 1077E Thematic Contests 【二分答案】
题目:戳这里 题意:n个数代表n个problem,每个数的值代表这个问题的topic,让我们挑出一些problems,满足挑出problems的topic是首项为a1公比为2的等比数列(每种topic ...
- 牛客网多校第4场 D Another Distinct Values 【构造】
题目:戳这里 题意,n*n的矩阵,只能填-1,0,1,问能不能使该矩阵的任意行和列的和都不想等. 解题思路:戳这里 可以说是一目了然了 附ac代码: 1 #include<iostream> ...
- codeforces 7B
B. Memory Manager time limit per test 1 second memory limit per test 64 megabytes input standard inp ...
- Leetcode(10)-正则表达式匹配
给定一个字符串 (s) 和一个字符模式 (p).实现支持 '.' 和 '*' 的正则表达式匹配. '.' 匹配任意单个字符. '*' 匹配零个或多个前面的元素. 匹配应该覆盖整个字符串 (s) ,而不 ...