小程序自定义组件05
2020-02-20 本文已影响0人
仕明同学
1、定义Componet文件夹，定义Tabs组件
- js文件
properties组件的属性列表 里面存放的是从父组件接受的数据
properties: {
//要接受的数据名称
aaa: {
// type 要接受的数据的类型 String 大写
type:String,
// value 默认值
value: ""
},
tabs:{
type:Array,
value:[]
}
},
- methods 组件的方法列表
组件的方法 在methods处理
this.triggerEvetn("父组件自定义事件的名称",要传递的参数)
this.triggerEvent("itemChange",{index})
methods: {
handelTap(e) {
console.log(e)
// 1------------------
// 获取点击中的索引 获取元数组 进行循环
// 对每一个循环项
//点击的角标是从 wxss中获取的 注意传递参数的过程
const { index } = e.currentTarget.dataset;
// 其实这种方法对复杂的结构类型 仅仅是复制一份 变量的引用而已
// 相当于 let tabs=this.data.tabs;
// let { tabs } = this.data;
// // 最严谨的写法是 深拷贝
// let tabss = JSON.parse(JSON.stringify(this.data.tabs))
// // 数组的循环
// // [].forEach 遍历数组的时候，修改了v的时候，原数组也会被修改
// tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
// this.setData({
// tabs
// })
// 2-------------------------------
// 点击事件触发的时候，触发父组件中自定义事件，同时传递给父组件
// this.triggerEvetn("父组件自定义事件的名称",要传递的参数)
this.triggerEvent("itemChange",{index})
}
}
- wxml slot 标签 其实就是一个占位符
等到父组件调用子组件的时候，在传递过来标签，就会替换slot标签的位置 小程序获取节点绑定数据data-index的方法
<!-- components/Tabs/Tabs.wxml -->
<view>{{aaa}}</view>
<view class="tabs">
<view class="tabs_title">
<!-- <view class="title_item active" >首页</view>
<view class="title_item">原创</view>
<view class="title_item">分类</view>
<view class="title_item">关于</view> -->
<!-- 小程序获取节点绑定数据data-index的方法 -->
<view bindtap="handelTap" data-index="{{index}}" wx:for="{{tabs}}" wx:key="id" class="title_item {{item.isActive? 'active':''}}">
{{item.name}}
</view>
</view>
<!-- <view class="tabs_content">内容</view> -->
<!-- slot 标签 其实就是一个占位符
等到父组件调用子组件的时候，在传递过来标签，就会替换slot标签的位置 -->
<slot></slot>
</view>
- wxss display 属性规定元素应该生成的框的类型
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性
flex-direction: column-reverse 方向查下质料
写 padding ： p10rpx
padding:10px 5px;
上填充和下填充是 10px
右填充和左填充是 5px
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
justify-content属性定义了项目在主轴上的对齐方式
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
/* components/Tabs/Tabs.wxss */
.tabs{
}
/*
display 属性规定元素应该生成的框的类型
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性
flex-direction: column-reverse 方向查下质料
写 padding ： p10rpx
padding:10px 5px;
上填充和下填充是 10px
右填充和左填充是 5px
*/
.tabs_title{
display: flex ;
padding: 10rpx 2rpx;
}
/*
justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式
justify-content属性定义了项目在主轴上的对齐方式
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式
*/
.title_item{
flex: 1;
display: flex;
justify-content: center;
/* 元素位于容器的中心 */
align-items: center;
}
.active{
color: red;
/*
border-bottom缩写属性设置一个声明中所有底部边框属性
currentColor等于当前字体的颜色
*/
border-bottom: 5rpx solid currentColor;
}
.tabs_content{
}
使用组件 在Demo
1、父组件向子组件传递数据。是通过标签属性的方式来传递的
aaa="123" 传递给子组件
在子组件接受这个值
2、子组件向父组件传递数据： this.triggerEvent("itemChange",{index})
{
"usingComponents": {
"Tabs":"../../components/Tabs/Tabs"
}
}
<!--pages/demo17/demo17.wxml-->
<!--
1、父组件向子组件传递数据。是通过标签属性的方式来传递的
aaa="123" 传递给子组件
在子组件接受这个值
2、子组件向父组件传递数据： this.triggerEvent("itemChange",{index})
-->
<Tabs aaa="123" tabs="{{tabsDemo17}}" binditemChange="handelItemChange"></Tabs>
<block wx:if="{{tabsDemo17[0].isActive}}" >
0
</block>
<block wx:elif="{{tabsDemo17[1].isActive}}" >
1
</block>
<block wx:elif="{{tabsDemo17[2].isActive}}" >
2
</block>
<block wx:else>
3
</block>
<view >父组件传递过来的 </view>
Demo.js
最严谨的写法是 深拷贝
let tabss = JSON.parse(JSON.stringify(this.data.tabs))
数组的循环
[].forEach 遍历数组的时候，修改了v的时候，原数组也会被修改
tabsDemo17.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
// pages/demo17/demo17.js
Page({
/**
* 页面的初始数据
*/
data: {
tabsDemo17: [
{
id: 0,
name: "首页Demo17",
isActive: true
},
{
id: 1,
name: "原创",
isActive: false
},
{
id: 2,
name: "分类",
isActive: false
},
{
id: 3,
name: "关于",
isActive: false
}
]
},
//自定义事件，用来接收子组件传递的数据
handelItemChange(e) {
console.log(e)
const {index}=e.detail;
let { tabsDemo17 } = this.data;
// 最严谨的写法是 深拷贝
// let tabss = JSON.parse(JSON.stringify(this.data.tabs))
// 数组的循环
// [].forEach 遍历数组的时候，修改了v的时候，原数组也会被修改
tabsDemo17.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
this.setData({
tabsDemo17
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
