之前寫了各種邏輯中的部分代碼 , 這里貼出來每個頁面的完整代碼
image.png
自定義組件Tabs
Tabs.wxml
<view class="tabs">
<view class="tab_title">
<view wx:for="{{tabs}}" wx:key="{{tabs.id}}" class="title_item {{item.isActive?'active':''}}" bindtap="handleItemTap" data-index="{{index}}">
{{item.name}}
</view>
</view>
<view class="tabs_content">
<!--
slot標(biāo)簽 其實就是一個占位符 插槽
等到父組件調(diào)用子組件的時候再傳遞標(biāo)簽過來,最終這些被傳遞的標(biāo)簽就會替換slot插槽的位置
-->
<slot ></slot>
</view>
</view>
Tabs.js
// commponents/Tabs/Tabs.js
Component({
/**
* 里邊存放的是要從父組件中接收的數(shù)據(jù)
* 組件的屬性列表
*/
properties: {
// //要接受的數(shù)據(jù)的名稱
// aaa:{
// //type 要接收的數(shù)據(jù)的類型
// type:String,
// //value 默認值
// value:""
// }
tabs: {
type: Array,
value: []
}
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {
},
/**
* 1. 頁面.js文件中,存放事件回調(diào)函數(shù)的時候,存放在data同層級下
* 2. 組件.js文件中,存放事件回調(diào)函數(shù)的時候,必須存放在methods中
* 組件的方法列表
*/
methods: {
//綁定點擊事件,需要再methods中綁定
handleItemTap(e) {
/**
1. 綁定點擊事件,需要再methods中綁定
2. 獲取被點擊的索引
3. 獲取原數(shù)組
4. 對數(shù)組循環(huán)
1. 給每一個循環(huán)性,選中屬性改為false
2. 給當(dāng)前的索引項選中屬性給true
5. 點擊事件觸發(fā)的時候
觸發(fā)父組件中的自定義事件,同時傳遞數(shù)據(jù)給父控件
this.triggerEvent("父組件自定義事件的名稱",要傳遞的參數(shù))
*/
console.log("點擊咯!");
console.log(e);
//2. 獲取被點擊的索引
const { index } = e.currentTarget.dataset;//{index} 是es6中的解構(gòu)賦值
//3. 獲取data中的數(shù)組
//解構(gòu) 對復(fù)雜類型進行解構(gòu)的時候,復(fù)制了一份變量的引用而已
//最嚴謹?shù)淖龇?重新拷貝一份數(shù)組,再對這個數(shù)組的北方進行處理 : let tabs = JSON.parse(JSON.stringify(this.data.tabs));
//不要直接修改this.data.數(shù)據(jù)
// let { tabs } = this.data;//相當(dāng)于 let tabs = this.data.tabs;
//4. 對數(shù)組循環(huán)(給每一個循環(huán)性,選中屬性改為false;給當(dāng)前的索引項選中屬性給true)
//[].forEach遍歷數(shù)組 遍歷數(shù)組的時候修改了v 也會導(dǎo)致原數(shù)組被修改
// tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
// this.setData({
// tabs
// })
//5. 觸發(fā)父組件中的自定義事件
this.triggerEvent("itemChange",{index});
}
}
})
Tabs.wxss
/* */
.tabs{
}
.tab_title{
display: flex;
padding: 10rpx 0;
}
.title_item{
flex: 1;
display: flex;
justify-content: center;
padding: 10rpx;
align-items: center;
}
.active{
color: red;
border-bottom: 5rpx solid currentColor;
}
.tabs_content{
}
引用文件demo5
demo5.wxml
<!--
1. 父組件(頁面)向子組件傳遞數(shù)據(jù),通過標(biāo)簽屬性的方式來傳遞
1. 在子組件上進行接收
2. 把這個數(shù)據(jù)當(dāng)成是data中的數(shù)據(jù)直接用即可
2. 子向父傳遞數(shù)據(jù),通過事件的方式傳遞
1. 在子組件的標(biāo)簽上加入一個自定義事件
-->
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
<block wx:if="{{tabs[0].isActive}}">0</block>
<block wx:elif="{{tabs[1].isActive}}">1</block>
<block wx:elif="{{tabs[2].isActive}}">2</block>
<block wx:else>3</block>
</Tabs>
demo5.js
// pages/demo5/demo5.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
tabs: [
{
id: 0,
name: '首頁',
isActive: true
},
{
id: 1,
name: '原創(chuàng)',
isActive: false
},
{
id: 2,
name: '分類',
isActive: false
},
{
id: 3,
name: '關(guān)于',
isActive: false
}
]
},
//自定義事件,用來接收子組件傳遞的數(shù)據(jù)的
handleItemChange(e) {
console.log(e);
//接收傳遞過來的參數(shù)
const index = e.detail.index;
let {tabs} = this.data;
tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
this.setData({
tabs
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面卸載
*/
onUnload: function () {
},
/**
* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點擊右上角分享
*/
onShareAppMessage: function () {
}
})
