接着上篇 小程序,组件与模板对比,及其简单使用 ,这篇我们继续说自定义组件。
一.自定义组件之间的调用:
首先,先按上篇的步骤建好scroll-comp组件,把index.wxml中的左右滑动图片部分代码拷贝到
scroll-comp.wxml中,把index.wxss中对应的样式拷贝到scroll-comp.wxss中,index.js中对应的图片数组也拷贝到scroll-comp.js中。
![d747e5e23a53f2b3abee7d159448e5fd.png](https://i-blog.csdnimg.cn/blog_migrate/3507f3673b40f9b49895395259ac1f5d.jpeg)
scroll-comp.wxml页面。
scroll-comp.wxss:
.comview{
margin-top: 15rpx;
}
.scroll{
display: flex;
white-space: nowrap;
height: 300rpx;
}
scroll-comp.js:
/**
* 组件的初始数据
*/
data: {
imgscroll:["../../images/xiaochengxu01.png","../../images/xiaochengxu03.png","../../images/xiaochengxu02.png"]
},
其次,在上篇中的list-comp.json配置文件配置scroll-comp组件。
![c4c2ab0c5b9cbf2168c3ec3973b0b305.png](https://i-blog.csdnimg.cn/blog_migrate/27d3f73f36390f6226ff91ee69bca3de.jpeg)
最后,在list-comp.wxml中直接使用 配置好的组件名称(scroll-comp),index.xml页面也使用该组件替换原来左右滑动图片的那部分代码。
![41b9fb0c217904103d8da08e38599f3d.png](https://i-blog.csdnimg.cn/blog_migrate/3b030b28a960993bb749fe67351bb5f4.jpeg)
![a4efe1c6841023be3282395ee2689eee.png](https://i-blog.csdnimg.cn/blog_migrate/680af234463cf6461d57d3edcac30d3a.jpeg)
效果:
1.主页效果:
![0401f534e7d3fb55ae96c551f809e9e8.png](https://i-blog.csdnimg.cn/blog_migrate/0edf30d57e558ae0f53c14dba7decc7a.jpeg)
肉类页面效果:
![a2c1ec625116fb74bd77fbc09cb7540a.png](https://i-blog.csdnimg.cn/blog_migrate/b1fa45c84b48179eb0027d38846fd917.jpeg)
二.使用插槽slot扩展定义组件,使用过vue的同学应该都能理解。
所谓插槽就是在不修改组件内部代码情况下,还能在外面按需扩展。这样就不会影响到原来使用了该组件的地方。
插槽使用步骤:
- 单个插槽使用,这种情况slot不用使用name属性。小程序自己会匹配。
在scroll-comp.wxml最后面加入:
![a82d835ca1bc53cb064d6c844264f971.png](https://i-blog.csdnimg.cn/blog_migrate/0426dab49265587369d78db0580fef32.jpeg)
- 多个插槽使用,例如我想在scroll-comp组件最上方和最下方添加按钮,那么先要在最上方使用用slot,然后最下方也用slot。然后分别给他们取上名字。最后还有要在scroll-comp.js里添加上options,这样该组件才支持多个插槽。
![3ea5e1bdf6b4a64c191e48c9f8b9f6df.png](https://i-blog.csdnimg.cn/blog_migrate/8888a57577517133a1337db26f100dbc.jpeg)
![47cb94e93475d95951e186a0363e5a45.png](https://i-blog.csdnimg.cn/blog_migrate/21f5ede273150886b4cedbce2ba29cf5.jpeg)
- 在index.wxml页面中写上两个按钮,然后在使用slot属性指明用于哪个slot。
![fd6a1488ab0e576c9f35cba266105d6f.png](https://i-blog.csdnimg.cn/blog_migrate/6cfe903532a2d048b89f8308f4288cb3.jpeg)
总结:
- 组件之间引用,主要是要配置.json文件中的 "usingComponents"。
- 组件扩展,是使用slot插槽扩展组件原来没有的功能,不影响组件原来代码。
谢谢大家浏览,喜欢的点个赞或者关注下,虽然都只是入门级别的,但只有入门级别的掌握好了才能往上走。以前看别人技术博客,觉得几分钟就看完,殊不知别人花了多少时间写。
我是只说代码的大饼,不要只是写代码时想起我,饿了也可以想起我。