【微信小程序学习】js开发中常见的点击事件变换css样式(active)

例如，点击下方哪个文字，下方的红底就会跑到哪里去，刚开始时，红底在第一个文字位置。

界面WXML

<scroll-view scroll-x class="navScroll" enable-flex>
    <view class="navItem" wx:for="{{videoGroupList}}" wx:key="id">
      <view class="navContent {{navId === item.id?'active':''}}" bindtap="changeNav" id="{{item.id}}">
      {{item.name}}
      </view>
    </view>
</scroll-view>

这边注意用到了{{navId === item.id?'active':''}},  当navId等于item.id的时候，才会出现active类，否则不会出现。

  <view class="navContent {{navId === item.id?'active':''}}" bindtap="changeNav" id="{{item.id}}"

 样式WXSS

.navScroll{
  display: flex;
  white-space: nowrap;
}

.navScroll .navItem{
  padding: 0 30rpx;
  font-size: 28rpx;
  height: 60rpx;
  line-height: 60rpx;
}

.navItem .active{
  border-bottom: 1rpx solid #d43c33;
}

 JS

// pages/video/video.js
import request from '../../utils/request.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    videoGroupList:[] ,//导航标签
    navId:'' ,//导航标识
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   //获取导航数据
   this.getVideoGroupListData();
  },

  //获取导航数据
  async getVideoGroupListData(){
    let videoGroupListData = await request('/video/group/list');
    this.setData({
      videoGroupList:videoGroupListData.data.slice(0,14) ,
      navId:videoGroupListData.data[0].id //让第一个底边刚开始时有红框
    })
  },
  //点击切换导航的回调
  changeNav(event){
    let navId = event.currentTarget.id; //通过id向event传参的时候如果传的是number会自动转换成string
    this.setData({
      navId:navId*1
    })
  },


})