swiper组件应用：制作导航栏

wxml代码：

        
         
           
              
                 
         
          {
   {item}}
                
             
          
          
         
           
              
        
                 1       
               
        
                 2       
               
        
                 3       
             
          
      
     

js代码：

data:{    navbarActiveIndex: 0,    navbarTitle: [      "标题1",      "标题2",      "标题3"    ],  },//导航栏catchtap触发事件  onNavBarTap: function (event) {    // 获取点击的navbar的index    let navbarTapIndex = event.currentTarget.dataset.navbarIndex    // 设置data属性中的navbarActiveIndex为当前点击的navbar    this.setData({      navbarActiveIndex: navbarTapIndex,    })  },//内容bindanimationfinish触发事件  onBindAnimationFinish: function ({ detail }) {    // 设置data属性中的navbarActiveIndex为当前点击的navbar    this.setData({      navbarActiveIndex: detail.current    })  },

 

wxss：

.movie-container{
     display: flex;  flex-direction: column;}.navbar{
     display: flex;  z-index: 500;  width: 100%;  height: 50px;  flex-direction: row;  text-align: center;  color: #A8A8A8;  font-size: 15px;  box-sizing: border-box;  background-color: #FFF;  border-bottom: 1rpx solid #DFDFDF;}.navbar-item{
     flex: 1;  padding: 26rpx 0px;}.navbar-item-active{
     transition: all 0.3s;  border-bottom: 10rpx solid #494949;  color: #494949;}.movie-content-wrapper{
     padding-top: 20px;}

主要用swiper组件实现内容页的切换，其中导航栏中样式切换采用 {

{navbarActiveIndex === index ? 'navbar-item-active' : ''}} 方法。具体使用方法更改一些参数即可看见效果