微信小程序点击顶部导航栏切换样式代码实例-成都快上网建站

微信小程序点击顶部导航栏切换样式代码实例

这篇文章主要介绍了微信小程序点击顶部导航栏切换样式代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

在陆河等地区,都构建了全面的区域性战略布局,加强发展的系统性、市场前瞻性、产品创新能力,以专注、极致的服务理念,为客户提供成都做网站、网站建设 网站设计制作按需开发,公司网站建设,企业网站建设,品牌网站设计,营销型网站,外贸网站建设,陆河网站建设费用合理。

类似这样的效果

微信小程序点击顶部导航栏切换样式代码实例


  
  
   
    {{item.itemsName}} 
   
  
 
.helpDisList .content{
 position: relative;
 width: 710rpx;
 border-radius: 5rpx;

}
.active{ //当点击的时候添加这个样式
 /* border-bottom: 4rpx solid rgb(252, 186, 7); */
 color:rgb(252, 186, 7);
}
Page({
 data:{

  helpCateList:[ //数据从后台请求回来赋值
   // { id: "1", desc: "康复医疗" },
   // { id: "2", desc: "教育" },
   // { id: "3", desc: "就业" },
   // { id: "4", desc: "扶贫" },
   // { id: "5", desc: "职业培训" },
   // { id: "6", desc: "社会保障" },
   // { id: "7", desc: "文化生活" },
  ],
  currentTab: 1,
 },
 cateChange(e) {
  console.log(e)
  let that = this
  that.setData({

   currentTab: e.currentTarget.dataset.itemsid, //这个必须要

  })
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。


网站名称:微信小程序点击顶部导航栏切换样式代码实例
分享路径:http://kswjz.com/article/gccgii.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流