小程序——Tab切换
<view class="body">
<view class="nav bc_white">
<view class="{{selected?'red':'default'}}" bindtap="selected">系统提醒</view>
<view class="{{selected1?'red':'default'}}" bindtap="selected1">优惠活动</view>
<view class="{{selected2?'red':'default'}}" bindtap="selected2">123</view>
</view>
<view class="{{selected?'show':'hidden'}}">for system</view>
<view class="{{selected1?'show':'hidden'}}">for activity</view>
<view class="{{selected2?'show':'hidden'}}">for activsadity</view>
</view>
WSS
page {
background-color: rgb(243,243,243);
} .nav {
width: 100%;
height: 80rpx;
display: flex;
flex-direction: row;
background: #fff;
justify-content: space-around;
} .nav view {
width: 180rpx;
text-align: center;
} .default {
line-height: 80rpx;
text-align: center;
color: #000;
font-weight: bold;
font-size: 30rpx;
} .red {
line-height: 80rpx;
text-align: center;
color: rgb(0, 192, 10);
font-weight: bold;
font-size: 30rpx;
border-bottom: 4rpx solid rgb(0, 192, 10);
} .show {
display: block;
text-align: center;
} .hidden {
display: none;
text-align: center;
}
JS
data: {
selected: true,
selected1: false
},
selected: function (e) {
this.setData({
selected1: false,
selected2: false,
selected: true
})
},
selected1: function (e) {
this.setData({
selected: false,
selected2: false,
selected1: true
})
},
selected2: function (e) {
this.setData({
selected: false,
selected2: true,
selected1: false
})
},
小程序——Tab切换的更多相关文章
- 微信小程序tab切换,可滑动切换,导航栏跟随滚动实现
简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...
- 根据id来实现小程序tab切换,
本例根据绑定id来实现tab切换,但本例仍有缺陷,用for循环数据,无法实现切换.如有大神能够有更好方法,欢迎留言更正 WXML: <view class="tab"> ...
- 小程序tab切换 点击左右滑动
wxml <scroll-view scroll-x="true" class="navbar-box"> <block wx:for=&qu ...
- 小程序tab切换代码
<!--index.wxml--> <view class="container"> <view class="navtap" & ...
- 微信小程序Tab选项卡切换大集合
代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 小程序TAB列表切换内容动态变化,scrollview高度根据内容动态获取
滑动tab选项卡 一.在小程序里面tab选项卡是用的是自带的swiper组件,下面直接上代码 <view class="container"> <view cla ...
- 微信小程序tab(swiper)切换
<- wxml -> <view class="youhui"> <view ' bindtap='toggle'> 未使用 </view ...
- 微信小程序-tab标签栏实现教程
一.摘要 tab栏(标签切换栏)是app中常见的一种交互方式,它可以承载更多的内容,同时又兼顾友好体验的优点.但在小程序中,官方并没有为咱们提供现成的组件.因此我们程序员展现才艺的时候到了(其实市面上 ...
- 微信小程序 - tab选项卡(组件)
更新日期: 2019/3/5:首次发布,默认下标“curIndex”超出红色提示 2019/3/7:增加tabName,可自定义数据标题名称(详情看示例) 支持单个/多个tab(显示/隐藏) 参数: ...
随机推荐
- Windows OpenSSH 基本用法
笔者在前文<Windows 支持 OpenSSH 了!>中介绍了 Windows 对 OpenSSH 支持的基本内容,本文在前文的基础上介绍一些 OpenSSH Server 的配置和常见 ...
- Git安装以及常用命令(图文详解)
**Git安装以及常用命令** 1.下载安装Git,傻瓜式安装相信大家都会. 官网下载地址:[https://git-scm.com/downloads] 2.Git基本操作 (1)git --ver ...
- @vue/cli 3 运行支持报错 socket
问题 /sockjs-node/info 无限报错 解决方案 原因是相关代理端不支持 ws,因此需要在代理处关闭 ws,即 ws: false,如下: vue.config.js const ds_p ...
- Jenkins - Extended E-mail配置教程
前言: 在Jenkins的使用中邮件提醒是一个常用功能,Extended E-mail Notification是一个功能更为齐全,使用也更为复杂的插件,本文即将为大家详细讲解如何配置相关内容,感兴趣 ...
- H5 37-背景缩写
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- PS调出甜美艺术外景女生照片
前期思路:拍摄时间大概在下午三四点左右,IOS100 f/1.8 .其实夏天最好的拍摄时间在傍晚五点这样,曝光太强片子会泛白,这张原片首先构图不是很好看,所以我要给它二次构图裁剪一下.下面是裁剪好后的 ...
- 数据快速批量添加到Elasticsearch
如何把数据快速批量添加到Elasticsearch中 问题来源 最近新做一个项目,有部分搜索比较频繁的数据,而且量级比较大,预计一两年时间很可能达到100G,项目要求不要存在数据库中,最终出来有两个方 ...
- 【问题解决方案】从 Anaconda Prompt 或 Jupyter Notebook 终端进入Python后重新退出到命令状态
从 Anaconda Prompt 或 Jupyter Notebook 终端进入Python后重新退出到命令状态 退出Python:exit() 或者 Ctrl+z 例子一枚 默认打开的是3.7,需 ...
- 3 Asking for more information
1 Could you tell me more about your idea? 2 Could I hear more about your idea? 3 Could you expain yo ...
- Java中List集合去除重复数据的四种方法
1. 循环list中的所有元素然后删除重复 public static List removeDuplicate(List list) { for ( int i = 0 ; i < lis ...