夜光帶你走進 微信小程序開發（四十一）擅長的領域

夜光序言：

沒有誰的生活會一直完美，但無論什麼時候，都要看向前方，滿懷希望就會所向披靡

 

 

 

 

 
 
正文：
 
                                              以道御術 / 以術識道

 

 

 

<!--components/Tabs/Tabs.wxml-->
<view class="tabs">
    <view class="tabs_title">
       <view 
       class="title_item  {{item.isActive?'active':''}}"
       wx:for="{{tabs}}"
       wx:key="id"
       >
       {{item.value}}
       </view>
    </view>

    <view class="tabs_content">
    
    </view>
</view>

 

/* 夜光：components/Tabs/Tabs.wxss */
.tabs{}
.tabs_title{
   display: flex;
   /* padding: 15rpx 0; */
}
.title_item{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 15rpx 0;
}
.active{
  color: var(--themeColor);
  border-bottom: 5rpx solid currentColor;

}
.tabs_content{

}

 

 

 

 

 

// pages/goods_list/goods_list.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    tabs:[
      {
         id:0,
         value:"綜合",
         isActive:true
      },
      {
        id: 1,
        value: "銷量",
        isActive: false
      },
      {
        id: 2,
        value: "價格",
        isActive: false
      }
    
    ]
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    console.log(options)
  },

  //夜光：標題的點擊事件  從子組件傳遞過來的
  handleTabsItemChange(e){
    // console.log(e)
    //1. 獲取被點擊的標題索引
    const {index} = e.detail;

    //2. 修改源數組
    let {tabs} = this.data;
    tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
    //3. 賦值到data中
    this.setData({
      tabs
    })
    
  }

})

 

// components/Tabs/Tabs.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
     tabs:{
       type:Array,
       value:[]
     }
  },

  /**
   * 組件的初始數據
   */
  data: {

  },

  /**
   * 組件的方法列表
   */
  methods: {
    //夜光：定義我們的點擊事件
    handleItemTap(e){
      //1. 獲取點擊的索引
      const {index} = e.currentTarget.dataset;
      // console.log(index)
      //2. 觸發父組件中的事件 自定義
      this.triggerEvent("tabsItemChange",{index});

    }
  }
})