微信小程式頁面功能-----標籤切換

昨夜小楼听风雨發表於2024-04-20
微信小程式

一、頁面佈局

首先我們需要佈局出標籤切換的頁面，下面不多描述直接上程式碼

1、html部分

<!-- 標籤頁標題 -->
<view class="tob">
  <view class="tab-item">音樂推薦器</view>
  <view class="tab-item">播放器</view>
  <view class="tab-item">播放列表</view>
</view>
<!-- 內容區域 -->
<view class="content">
  <swiper>
    <swiper-item>
    <include src="info.wxml" />
    </swiper-item>
    <swiper-item>
    <include src="play.wxml" />
    </swiper-item>
    <swiper-item>
    <include src="playlist.wxml" />
    </swiper-item>
  </swiper>
</view>
<!-- 底部播放器 -->
<view class="player"></view>

下面是三個標籤頁面設定

（1）info.html

<view style="background: #ccc; color: #000; height: 100%;">
info
</view>

（2）play.wxml

<view style="background: #ddd; color: #000; height: 100%;">
play
</view>

（3）playlist.wxml

<view style="background: #eee; color: #000; height: 100%;">
playlist
</view>

2、css部分

page {
  display: flex;
  flex-direction: column;
  background: #17181a;
  color: #ccc;
  height: 100%;
}
.tab{
  display: flex;
}
.tab-item{
  flex: 1;
  font-size: 10pt;
  text-align: center;
  line-height: 72rpx;
  border-bottom: 6rpx solid #eeeeee;
}
.content{
  flex: 1;
}
.content > swiper{
  height: 100%;
}
.player{
  background: #222;
  border-top: 1px solid #252525;
  height: 112rpx;
}

下面是我們的頁面效果圖

二、實現效果

修改pages/index/index.wxml檔案中的tab區域，為3個tab-item繫結事件並設定data-item屬性

  <view class="tab-item" bindtab="changeItem" data-item="0">音樂推薦器</view>
  <view class="tab-item" bindtab="changeItem" data-item="1">播放器</view>
  <view class="tab-item" bindtab="changeItem" data-item="2">播放列表</view>

在上述程式碼中，data-item的值表示swiper元件中對應的swiper-item索引

接下來修改content區域，為swiper元件中的current屬性繫結變數item

<!-- 內容區域 -->
<view class="content">
  <swiper current="{{item}}">

完成上面程式碼後，在tab-item的changeItem事件中，將item的值設為data-item的值即可實現切換到對應的標籤頁。修改page/index/index.js檔案，將item和changeItem增加到程式碼中

Page({
  data:{
    item:0,
  },
  changeItem:function(e){
    this.setData({
      item:e.target.dataset.item
    })
  }
})

切換標籤頁後還需要改變當前標籤頁對應的tab-item的樣式，將文字顏色和底部的線條顏色設為紅色，表示當前標籤頁處於活躍狀態。下面透過判斷變數tab的值，來為當前活躍的data-item增加一個active樣式，具體程式碼如下

 <view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音樂推薦器</view>
  <view class="tab-item {{tab==1?'active':''}}" bindtap="changeItem" data-item="1">播放器</view>
  <view class="tab-item {{tab==2?'active':''}}" bindtap="changeItem" data-item="2">播放列表</view>

接下來在pages/index/index.wxss中編輯active樣式，具體程式碼如下

.tab-item.active{
  color: #c25b5b;
  border-bottom-color:#c25b5b ;
}

為了更改tab值，下面為swiper元件繫結改變事件，具體程式碼如下

<view class="content">
  <swiper current="{{item}}" bindchange="changeTab">

在上述程式碼中，changeTab事件處理函式會在swiper元件發生切換時呼叫。下面修改page/index/index.js檔案，在頁面資料中增加tab變數

  data:{
    item:0,
    tab:0
  },

然後編輯changeTab事件處理函式，實現當該函式被呼叫後，tab的值更改為當前標籤頁的索引

changeTab:function(e){
    this.setData({
      tab:e.detail.current
    })
  }

相關文章