之前写了各种逻辑中的部分代码 , 这里贴出来每个页面的完整代码
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标签 其实就是一个占位符 插槽
等到父组件调用子组件的时候再传递标签过来,最终这些被传递的标签就会替换slot插槽的位置
-->
<slot ></slot>
</view>
</view>
Tabs.js
// commponents/Tabs/Tabs.js
Component({
/**
* 里边存放的是要从父组件中接收的数据
* 组件的属性列表
*/
properties: {
// //要接受的数据的名称
// aaa:{
// //type 要接收的数据的类型
// type:String,
// //value 默认值
// value:""
// }
tabs: {
type: Array,
value: []
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 1. 页面.js文件中,存放事件回调函数的时候,存放在data同层级下
* 2. 组件.js文件中,存放事件回调函数的时候,必须存放在methods中
* 组件的方法列表
*/
methods: {
//绑定点击事件,需要再methods中绑定
handleItemTap(e) {
/**
1. 绑定点击事件,需要再methods中绑定
2. 获取被点击的索引
3. 获取原数组
4. 对数组循环
1. 给每一个循环性,选中属性改为false
2. 给当前的索引项选中属性给true
5. 点击事件触发的时候
触发父组件中的自定义事件,同时传递数据给父控件
this.triggerEvent("父组件自定义事件的名称",要传递的参数)
*/
console.log("点击咯!");
console.log(e);
//2. 获取被点击的索引
const { index } = e.currentTarget.dataset;//{index} 是es6中的解构赋值
//3. 获取data中的数组
//解构 对复杂类型进行解构的时候,复制了一份变量的引用而已
//最严谨的做法 重新拷贝一份数组,再对这个数组的北方进行处理 : let tabs = JSON.parse(JSON.stringify(this.data.tabs));
//不要直接修改this.data.数据
// let { tabs } = this.data;//相当于 let tabs = this.data.tabs;
//4. 对数组循环(给每一个循环性,选中属性改为false;给当前的索引项选中属性给true)
//[].forEach遍历数组 遍历数组的时候修改了v 也会导致原数组被修改
// tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
// this.setData({
// tabs
// })
//5. 触发父组件中的自定义事件
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. 父组件(页面)向子组件传递数据,通过标签属性的方式来传递
1. 在子组件上进行接收
2. 把这个数据当成是data中的数据直接用即可
2. 子向父传递数据,通过事件的方式传递
1. 在子组件的标签上加入一个自定义事件
-->
<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({
/**
* 页面的初始数据
*/
data: {
tabs: [
{
id: 0,
name: '首页',
isActive: true
},
{
id: 1,
name: '原创',
isActive: false
},
{
id: 2,
name: '分类',
isActive: false
},
{
id: 3,
name: '关于',
isActive: false
}
]
},
//自定义事件,用来接收子组件传递的数据的
handleItemChange(e) {
console.log(e);
//接收传递过来的参数
const index = e.detail.index;
let {tabs} = this.data;
tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
this.setData({
tabs
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
网友评论