H5 tab点击切换CSS样式- 微信小程序开发技术要点总结（一）

Hello，我是岚尹~一个热爱技术的项目经理。

不定期更新项目管理、前端以及运维相关方面的经验分享~ 

如果你对我的文章感兴趣，就请动动你的小手帮赞一下哦。

欢迎关注长期交流~

H5 tab点击切换CSS样式

一、交互场景

当我们在软件里面需要点击tab切换按钮的时候，按钮的样式一般是会变化的，这样可以加深交互印象，选中则展示背景为深色、字体为白色，未选中展示背景为浅色，字体为深色。

    id="{{dayView==true?'sview':'nview'}}" 

通过 id 绑定选中和未选中两种状态的样式，以一个已声明过的布尔量变量 dayView 作为判断条件，这样就能根据点击事件进行样式切换，同理，通过class绑定不同的样式也是可行的。

二、代码设计

html代码：

 <view class="tabx">
    <view class="today" bindtap="viewtoday" id="{{dayView==true?'sview':'nview'}}">Today</view>
    <view class="toweek" bindtap="viewweek" id="{{dayView==true?'nview':'wview'}}">Week</view>
  </view>

CSS 代码：

#sview {
 
background-color: #81c0c0;
 
color: white;
 
}
 
#wview {
 
background-color: #81c0c0;
 
color: white;
 
}
 
#nview {
 
background-color: #f0f0f0;
 
color: grey;

js 代码：

viewweek(){
  this.setData({dayView:false});
  this.getweektd();
},
viewtoday(){
  this.setData({dayView:true});
  this.getweektd();
},

三、功能展示

左侧为选中Today tab的样式，右侧图为选中 Week 的样式展示。

          

 

四、相关链接：

市面上没有自己想要的待办软件怎么办？那就自己开发一个吧。_岚尹_Nicole的博客-CSDN博客最近工作和日常都是千头万绪，而我这言帚忘笤的记性也没法用脑子一一记住，那怎么办呢？俗话说，好记性不如烂笔头，那就把这些待办项都记下来好了。我找了市面上的待办软件，但都不太符合我的需求。因为我本人一般是提前一周做待办规划，而且每件事只能精确到天，所以我急需一个以周为单位的看板视图，可以规划周一到周末的任务清单，最好是移动端的方式，更方便随时随地进行管理查看。既然现成的没有，那就自己动手吧。好，说干就干。先是方案设计，我选了墨刀这个对新手来说门槛比较低的原型工具。上面有很多组件都可以直接使用，上手比较快。...https://blog.csdn.net/Nicolege678/article/details/125248944