小程序.5—自定义组件

2021/12/7 20:17:24

本文主要是介绍小程序.5—自定义组件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

自定义组件

自定义组件的创建,以及引用

1.在主目录下创建一个文件夹components用于存放各个自定义的组件,这里先定义一个Tabs组件(注意我们定义的是组件,就像view,text一样,想要页面显示相关内容也要在页面的wxml里面引用)

所以再companies文件夹里在定义一个Tabs文件夹然后右键文件夹,选择新建companies就会自动生成四个必要文件,如图:

image-20211128105301684

随后我们在要引用该组件的页面文件.json文件中引用该组件

image-20211128105538045

然后在页面文件.wxml中使用组件

image-20211128105649751

样式优化

这里我们试着做一下这样一个标题栏

image-20211201104938772

当然这里做完还只是一个样式组件,还不能做到点击页面的跳转,后面才会学习页面的父向子传递。

如果我们要让每个页面有这种相同的(内容都相同)的标题栏,我们可以在自定义组件的wxml中直接写view标签,然后再通过wxss进行优化

image-20211201105516619

这里我后来修改了改成了注释

image-20211201110019972

这里写完wxss优化后发现从原来的一竖行变成了这样的一个标题栏样式,但是不可能每个需要标题栏的页面,标题类容都是一样的,所以我们改一种写法让后期改动更加方便,所以我才会把上面的wxml注释掉

在Tabs.js中用数组写下image-20211201110813175

注意这里的属性赋值用:,不是java惯性思维用=

要显示出来还是要在wxml中循环显示出数组中元素的信息,在小程序开发中特有的循环是wx:for{{数组名}}

image-20211201111132249

这里还有一个关键帧key即根据id来显示这样可以确定我们显示的顺序

标题激活选中

通过写回调函数,使得选中时有一定的表达

( 1.页面.js文件中 存放事件回调函数的时候 存放在data同层级下!!!

2 组件.js文件中 存放事件回调函数的时候必须存放在methods中!!!)

绑定事件分为如下几步

/* 1.绑定点击事件,需要在methods中绑定

image-20211206152457921

​ 2.获取被点击的索引

做一个事件传参的方式来获取

image-20211206153605037

image-20211206153906109

随后我们在页面点击标题会显示打印,我们点开打印可以看到

image-20211206154005928

image-20211206154345012

3.获取原数组(获取data中的数组)

image-20211206155836138

创建了一个数组tabs用于存放data中的数组

​ 4.对数组循环

​ 1给每一个循环项 选中属性 改为false

​ 2给当前索引的项 添加激活选中效果*/

[].forEach方法是在js中用来遍历数组的方法 修改了 v,也会导致原数组被修改

image-20211206155905012

这里先调用我们创建的tabs数组的forEch方法来判断我们点击的是哪个,改变对应的isActive的值,再将改动后的tabs传给data中的原数组

父向子传递数据

上面我们在自定义组件中写了标题,且完成了可以选中发生改变,但是这样页面在使用这个组件时,内容都是一摸一样的,要完成标题项的动态化,我们可以使用父向子传递的方法来实现,也就是在页面中写好在传递到我们的自定义组件中。

这里我们是以页面wxml为父组件向自定义组件传递其属性值

image-20211206225304782

这里只是用aaa来演示,后面我们改一下传入数组

image-20211207181951338

然后我们在子组件这里是自定义组件Tabs的js文件里添加我们的properties用于接收

image-20211206225550421

这里也是用的字符串方便演示,更改后

image-20211207182101427

随后我们在子组件的wxml页面打印

image-20211206225708197

子向父传递数据

意思就是要使我们点击事件发生的时候改变我们父组件中data的值,上面我们写的父向子传递的方式像是复制,点击事件发生后并不能改变父组件中的data相当于我们子组件将父组件data复制了份改变的是复制的值,这里我们先在子组件中调用triggerEvent方法

image-20211207181556330

然后我们更改父组件的wxml里的事件

image-20211207184251847

当我们点击事件发生时相当于触发了这的binditemChange事件,以及后面的handleItemChange回调函数

然后在父组件js中写一个自定义事件,用来接收子组件接收的数据 就是完善父组件wxml中定义的回调函数体

image-20211207183214393

这里我们因为不知道传参的位置所以先这样写,然后我们点击观察打印,确定传参的位置再改写代码

这里我们点击后发现90行有个打印,展开看

image-20211207184020296

发现是detail,所以我们更改代码

image-20211207184942332

这里我们有了索引,然后拿到原数组,根据点击遍历原数组,改变原数组

image-20211207185308845

这样我们点击过后原数据就发生了改变image-20211207185449587

slot(实现点击不同的标题显示不同的内容)

image-20211207190632455

image-20211207191431122

在页面中完善要传递的内容就行了,激活时会自动替换slot

更多的自定义组件内容学习,自看官方的文档

[自定义组件](自定义组件 | 微信开放文档 (qq.com))

image-20211207192243814



这篇关于小程序.5—自定义组件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程