<!--index.wxml-->
<view class="container">
<view class="navtap" >
<a data-current="{{setting.current.key}}" bindtap="clickcurrent" style="color:{{currentSelect.key == 'current'?mainColor:oldcolor}};">
<text>本期试用</text>
<text class="activeline" style="background-color:{{currentSelect.key == 'current'?mainColor:whiteColor}};"></text>
</a>
<a data-current="{{setting.trailer.key}}" bindtap="clickcurrent" style="color:{{currentSelect.key == 'trailer'?mainColor:oldcolor}};">
<text>即将上线</text>
<text class="activeline" style="background-color:{{currentSelect.key == 'trailer'?mainColor:whiteColor}};"></text>
</a>
<a data-current="{{setting.report.key}}" bindtap="clickcurrent" style="color:{{currentSelect.key == 'report'?mainColor:oldcolor}};">
<text>试用报告</text>
<text class="activeline" style="background-color:{{currentSelect.key == 'report'?mainColor:whiteColor}};"></text>
</a>
<a data-current="{{setting.mytry.key}}" bindtap="clickcurrent" style="color:{{currentSelect.key == 'mytry'?mainColor:oldcolor}};">
<text>我的试用</text>
<text class="activeline" style="background-color:{{currentSelect.key == 'mytry'?mainColor:whiteColor}};"></text>
</a>
</view>
<block wx:if="{{currentSelect.key == 'current'}}"> </block>
<block wx:if="{{currentSelect.key == 'trailer'}}"> </block>
<block wx:if="{{currentSelect.key == 'report'}}"> </block>
<block wx:if="{{currentSelect.key == 'mytry'}}"> </block>
</view>

js

//index.js
//获取应用实例
const app = getApp() Page({
data: {
motto: '首页',
setting: {
current: {
key: "current",
},
trailer: {
key: "trailer"
},
report: {
key: "report"
},
mytry: {
key: "mytry"
}
},
mainColor: '#91d8d2',
oldcolor: 'grey'
},
currentSelect: {},
onLoad: function () {
this.setData({
'currentSelect.key': 'current'
})
},
clickcurrent: function (event) {
var that = this
that.setData({
'currentSelect.key':event.currentTarget.dataset.current
})
}
})

wxss

/**index.wxss**/

.navtap{
width:%;
height:40px;
text-align:center;
display:flex;
font-size:15px;
color:#;
background-color:#fff; } .navtap a{
flex:;
color:#;
line-height:38px;
} .activeline{
width:26px;
height:2px;
background-color:#fff;
display:block;
margin: auto;
}
.navtap a {
flex:;
color:#;
line-height:38px;
}

小程序tab切换代码的更多相关文章

  1. 微信小程序tab切换,可滑动切换,导航栏跟随滚动实现

    简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...

  2. 根据id来实现小程序tab切换,

    本例根据绑定id来实现tab切换,但本例仍有缺陷,用for循环数据,无法实现切换.如有大神能够有更好方法,欢迎留言更正 WXML: <view class="tab"> ...

  3. 小程序tab切换 点击左右滑动

    wxml <scroll-view scroll-x="true" class="navbar-box"> <block wx:for=&qu ...

  4. 小程序——Tab切换

    <view class="body"> <view class="nav bc_white"> <view class=" ...

  5. 微信小程序Tab选项卡切换大集合

    代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  6. PHP小程序后端支付代码亲测可用

    小程序后端支付代码亲测可用 <?php namespace Home\Controller; use Think\Controller; class WechatpayController ex ...

  7. 小程序TAB列表切换内容动态变化,scrollview高度根据内容动态获取

    滑动tab选项卡 一.在小程序里面tab选项卡是用的是自带的swiper组件,下面直接上代码 <view class="container"> <view cla ...

  8. 微信小程序tab(swiper)切换

    <- wxml -> <view class="youhui"> <view ' bindtap='toggle'> 未使用 </view ...

  9. 微信小程序开发---各代码文件简介

    根据上一文,已建立QuickStart 项目,该项目系本人毕设部分内容,所以记录以便以后查阅 开发小程序就必须了解小程序项目目录结构和文件作用,接下来就根据我现在自学得到的知识把这些记录下来. 一.目 ...

随机推荐

  1. Nginx快速自查手册

    本项目是一个 Nginx 极简教程,目的在于帮助新手快速入门 Nginx. demos 目录中的示例模拟了工作中的一些常用实战场景,并且都可以通过脚本一键式启动,让您可以快速看到演示效果. 概述 什么 ...

  2. 基于re模块的计算器

    最终计算器需求: 实现加减乘除及拓号优先级解析 用户输入 1 - 2 * ( (60-30 +(-40/5) * (9-2*5/3 + 7 /3*99/4*2998 +10 * 568/14 )) - ...

  3. POJ1979(Red and Black)--FloodFill

    题目在这里 题目意思是这样的,一个人起始位置在    '@'  处,他在途中能到达的地方为 ' .  '     而  '#' 是障碍物,他不能到达. 问途中他所有能到达的   '.'的数量是多少 ? ...

  4. 从 ASP.NET Core 2.1 迁移到 2.2 踩坑总结

    官方迁移文档:https://docs.microsoft.com/zh-cn/aspnet/core/migration/21-to-22?view=aspnetcore-2.2&tabs= ...

  5. github上更新fork的别人的项目

    直接上解决方案的步骤 (1)在自己fork后的项目的位置上,点击New pull request. (2)比较和原创版本(base)的变化 (3 ) compare across forks. 使得左 ...

  6. sed 查询特定内容

    查询命令对照表 打印/etc/passwd中第10行的内容 sed -n '10p' /etc/passwd 打印/etc/passwd中第8行开始,到第15行结束的内容 sed -n '8,15p' ...

  7. JAVA设计模式之单例模式(单件模式)—Singleton Pattern

    1.什么是单例模式? <Head First 设计模式>中给出如下定义:确保一个类只有一个实例,并提供一个全局访问点. 关键词:唯一实例对象. 2.单例模式的实现方式: 2.1 懒汉式 对 ...

  8. 18计科学期总成绩明细 && 小黄衫团队预选

    1.个人所有作业+团队作业总得分排名 2.千帆竞发图 3.各团队每次作业得分汇总 根据团队成绩排名,众志陈成队得分最高,预选为小黄衫团队. 对团队成绩有异议的团队,请在成绩预选发布后的两天内私信助教解 ...

  9. SpringBoot自动配置的魔法是怎么实现的

    SpringBoot 最重要的功能就是自动配置,帮我们省去繁琐重复地配置工作.相信用过SpringBoot的人,都会被它简洁的步骤所惊讶.那么 SpringBoot 是如何实现自动配置的呢? 在这之前 ...

  10. 【Java】聚合和组合的区别

    组合:部分与整体是与生俱来的,部分的存在依赖于整体.比如人与人的某个器官,人一出生,器官就在,人死亡,器官也就没了意义. 聚合:你与你的电脑(或者其它物品),电脑是属于你的吧,但是你是一出生就拥有了电 ...