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‘ : ‘‘}} 方法。具體使用方法更改一些參數即可看見效果

微信小程序制作-隨筆4