<!-- 结构 -->
<view class="wrapper">
<block wx:for="{{desc}}">
<view bindtap="toggle" data-index="{{index}}" class="{{descIndex===index?'active':''}}">{{item}}</view>
</block>
</view>
<view wx:if="{{descIndex===0}}">
商品详情
</view>
<view wx:if="{{descIndex===1}}">
产品参数
</view>
<view wx:if="{{descIndex===2}}">
售后保障
</view>

/* 样式 */
.wrapper{
display: flex;
justify-content: space-around;
}
.wrapper view{
flex: 1;
text-align: center;
line-height: 100rpx;
border-bottom: 1rpx solid #ccc;
}
.wrapper .active{
color: red;
font-weight: bold;
border-bottom: 1rpx solid red;
}
Page({
data: {
desc: ["商品详情", "产品参数", "售后保障"],
descIndex: 0,
},
toggle(e) {
this.setData({
descIndex: e.currentTarget.dataset.index
})
},
})

小程序-tabBar简易版的更多相关文章

  1. WordPress版微信小程序3.2版发布

    WordPress版微信小程序(下称开源版)距离上次更新已经过去大半年了,在此期间,我开发新的专业版本-微慕小程序(下称微慕版),同时开源版的用户越来越多,截止到2018年11月26日,在github ...

  2. WordPress版微信小程序3.0版发布

    距离WordPress版微信小程序上一个版本的发布过去了一个月了.在此间,我的工作有些变化,加上正在开发新版本,目前开源版的完善和升级稍稍有些滞后. 虽然这个版本是3.0版,期间有个过渡的2.8版,不 ...

  3. WordPress版微信小程序2.6版发布

    WordPress版微信小程序的完善和升级的工作一直都在进行中,我争取保证一个月可以出一个版本,希望通过一点点的改进,让这个开源产品日趋完美. 同时,pro版WordPress微信小程序也在紧锣密鼓的 ...

  4. 微信小程序tabbar设置样式在哪里改

    微信小程序tabbar通俗点说就是底部导航,我们一般会配置相关的菜单,方便读者快速导航.tabbar是在项目根目录中的配置文件 app.json 中进行设置:如果小程序是一个多 tab 应用(客户端窗 ...

  5. 小程序tabBar显示问题

    我一直在纠结为什么小程序在有的页面显示,有的页面不显示 查了一下才知道,小程序tabBar只在tabBar中的list定义了页面的才会显示,其余页面不会显示 如下例:tabBar只在画红框的页面显示

  6. 微信小程序tabBar与redirectTo 或navigateTo冲突

    微信小程序tabBar与redirectTo 或navigateTo冲突 tabBar设置的pagePath无法再次被redirectTo或navigateTo引用 导致跳转失败,更改为swithTa ...

  7. 微信小程序 tabBar模板

    tabBar导航栏 小程序tabBar,我们可以通过app.json进行配置,可以放置于顶部或者底部,用于不同功能页面的切换,挺好的... 但,,,貌似不能让动态修改tabBar(需求:通过switc ...

  8. 应用程序初次运行数据库配置小程序(Java版)

    应用程序初始化数据库配置小程序 之前写过一个Java版的信息管理系统,但部署系统的时候还需要手动的去配置数据库和导入一些初始化的数据才能让系统运行起来,所以我在想是不是可以写一个小程序在系统初次运行的 ...

  9. 微信小程序实现简易留言板

    微信小程序现在很火,于是也就玩玩,做了一个简易的留言板,让大家看看,你们会说no picture you say a j8 a,好吧先上图. 样子就是的,功能一目了然,下面我们就贴实现的代码,首先是H ...

随机推荐

  1. commons-httpclient 和 httpclient 区别

    今天在看项目的pom的时候,发现里面有这么两个包依赖. <dependency> <groupId>commons-httpclient</groupId> < ...

  2. Tree-Shaking性能优化实践 - 原理篇

    Tree-Shaking性能优化实践 - 原理篇   一. 什么是Tree-shaking 先来看一下Tree-shaking原始的本意 上图形象的解释了Tree-shaking 的本意,本文所说的前 ...

  3. Spring中注解方式实现IOC和AOP

    1.IOC注解 1.1 IOC和DI的注解  IOC: @Component:实现Bean组件的定义 @Repository:用于标注DAO类,功能与@Component作用相当 @Service:用 ...

  4. 分布式SQL数据库中部分索引的好处

    在优锐课的java学习分享中,探讨了分布式SQL数据库中部分索引的优势,并探讨了性能测试,结果等. 如果使用局部索引而不是常规索引,则在可为空的列上(其中只有一小部分行的该列不具有空值),然后可以大大 ...

  5. 避免Java中NullPointerException的Java技巧和最佳实践

    Java中的NullPointerException是我们最经常遇到的异常了,那我们到底应该如何在编写代码是防患于未然呢.下面我们就从几个方面来入手,解决这个棘手的​问题吧.​ 值得庆幸的是,通过应用 ...

  6. IT兄弟连 HTML5教程 HTML5技术的应用现状及HTML5平台的兴起

    HTML5的优良特性很快被各种类型的网站利用,比如文件拖拽到网页上传功能,多数即使用HTML5提供的新属性就可以完成,来实现素材的免插件拖放.因此,HTML5技术实际上在国内已经获得了较广泛的应用与支 ...

  7. sierpinski地毯

    (分形作业) 取一矩形,九等分而去其中. 每一份九等分去其中:循环往复.       方法一(传统方法) 将每个矩形映射到三个矩形中去即可. def big(a,times):    k=3**tim ...

  8. njnja 安装

    git clone git://github.com/ninja-build/ninja.git && cd ninja 安装re2c wget  https://kojipkgs.f ...

  9. NetCore 下使用 DataTable 以及可视化工具

    DtatTable 在命名空间System.Data下,NetCore2.0及以上支持.但是2017DataTable没有可视化工具,我也没有深研究直接下载的VS2019.然后在网上早了个SQLHel ...

  10. Android studio down 的项目中文出现 乱码

    发现down的项目file->open找到文件夹打开,里面少很多东西,像build.grade(好像拼错了). 这个问题是要file->import progect找到文件夹打开,as会自 ...