微信小程序制作-随笔4

swiper组件应用：制作导航栏

wxml代码：

<view class="movie-container">
   <!-- 导航栏 -->
   <view class="navbar">
     <block wx:for="{{navbarTitle}}" wx:key="index">
       <view class="navbar-item {{navbarActiveIndex === index ? 'navbar-item-active' : ''}}" data-navbar-index="{{index}}" catchtap="onNavBarTap">
         <text>{{item}}</text>
       </view>
     </block>
   </view>
    <!-- 内容 -->
   <view class="movie-content-wrapper">
     <swiper current="{{navbarActiveIndex}}" style="height:350px; overflow-y:auto;" bindanimationfinish="onBindAnimationFinish">
       <swiper-item>
        1
       </swiper-item>
       <swiper-item>
        2
       </swiper-item>
       <swiper-item>
        3
       </swiper-item>
     </swiper>
   </view>
</view>

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' : ''}} 方法。具体使用方法更改一些参数即可看见效果