小程序导航栏切换效果

最新推荐文章于 2022-09-23 22:18:46 发布

西街小饼干

最新推荐文章于 2022-09-23 22:18:46 发布

阅读量412

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/z177985/article/details/107600605

版权

微信小程序专栏收录该内容

8 篇文章 0 订阅

订阅专栏

小程序导航栏切换效果

1.效果展示
在这里插入图片描述
2.wxml

3.wxss

.tab-item {
  /* width: 16.6%; */

  height: 70rpx;
  margin-left: 35rpx;
  text-align: center;
  font-size: 15px;
  color: #333333;

}

.on {
  border-bottom: 5rpx solid #E9D8C4;
  font-weight: 600;
}
.swiper-tab {
  display: flex;
  flex-direction: row;
  line-height: 80rpx;
  /* border-bottom: 2rpx solid #777; */

}

4.js


 
 
swichNav: function (e) {
 
  console.log(e);
   
  var that = this;
   
  if (this.data.currentTab === e.target.dataset.current) {
   
  return false;
   
  } else {
   
  that.setData({
   
  currentTab: e.target.dataset.current,
   
  })
   
  }
   
  },

swiperChange: function (e) {
 
  console.log(e);
   
  this.setData({
   
  currentTab: e.detail.current,
   
  })
   
},