1. Tabs组件的封装

1.1 组件的引入

使用自定义的组件很简单,只需在使用组件的页面的配置文件.json文件中配置.

// pages/goods_list/index.json
{"usingComponents":{"Tabs": "../../components/Tabs/Tabs"}
}

然后再.wxml文件中使用即可

<!-- pages/goods_list/index.wxml -->
<Tabs></Tabs>

1.2 向组件传递参数(父->子)

在父页面中首先有如下数据

// pages/goods_list/index.js
page({data:{tabs: [...]}
})

然后在使用组件的时候将参数带上

<!-- pages/goods_list/index.wxml -->
<Tabs tabs="{{tabs}}"></Tabs>

在组件中接收参数

// components/Tabs/Tab.js
Component({properties:{tabs:{type: Array,value: []}}
})

之后就可以使用参数了. 下面是使用参数的写的一个小栗子:

<view class="tabs"><view class="tabs_title"><view wx:for="{{tabs}}" wx:key="id" class="title_item"></view></view>
</view>

1.3 给组件绑定点击事件

关键在于bindtap

<!-- components/Tabs/Tabs.wxml -->
<view bindtap="handleItemTap" data-hello="world">
</view>

上述将传递的参数写在了data-hello中,然后js中写事件处理函数

// components/Tabs/Tab.js
Components({methods: {handleItemTap(e) {// 接收data-hello属性的值const { hello } = e.target.dataset;}}
})

1.4 向父级传递值(子->父)

在子组件的事件处理函数中调用微信提供的triggerEvent

// components/Tabs/Tabs.js
Component({methods:{handleItemTap(e) {const { hello } = e.target.dataset;this.triggerEvent("TabsItemChange", { hello })}}
})

以上实现了: 当点击子组件的view标签时,会像父组件传递一个 { hello: world}的字符串.下面在父组件调用Tabs组件的位写上一个接收该方法的函数

<!-- pages/goods_list/index.wxml -->
<Tabs tabs="{{tabs}}" bindTabsItemChange ="handleTabsItemChange"></Tabs>

以上在父组件中添加了一个事件处理函数的索引信息,下面在父组件的js文件中实现事件处理函数

// pages/goods_list/index.js
Page({handleTabsItemChange(e) {const {hello} = e.detailconsole.log(hello);}
})

1.5 插槽的实现

Tab栏的最基本功能是,根据点击的小tips,底下的内容跟着改变.这在设计Tabs组件的时候就该考虑到

<!-- components/Tabs/Tabs.wxml -->
<view class="tabs"><view class="tabs_title"><view wx:for="{{tabs}}" wx:key="id">{{item.value}}</view></view><view class=”tabs_content><!-- 注意此处实现插槽 --><slot></slot></view>
</view>

在使用的时候,只需使用block标签替换插槽中的内容即可

<!-- pages/goods_list/index.wxml -->
<Tabs tabs="{{tabs}}"><block wx:if="{{tabs[0].isActive}}">综合</block><block wx:elif="{{tabs[1].isActive}}">销量</block><block wx:elif="{{tabs[2].isActive}}">价格</block>
</Tabs>

1.6 总体代码

包括组件的实现和调用

【组件的wxml】

<!--components/Tabs/Tabs.wxml-->
<view class="tabs"><view class="tabs_title"><view wx:for="{{tabs}}" wx:key="id" class="title_item {{item.isActive? 'active': ''}}"bindtap="handleItemTap"data-index="{{index}}">{{item.value}}</view></view><view class="tabs_content"><slot></slot></view>
</view>

【组件的js】

// components/Tabs/Tabs.js
Component({/*** 组件的属性列表*/properties: {tabs: {type: Array,value: [],},},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {handleItemTap(e) {// 1. 获取点击的索引const { index } = e.target.dataset// 2. 触发父组件中的事件this.triggerEvent("TabsItemChange", {index})},},
})

【组件的样式】

/* components/Tabs/Tabs.wxss */
.tabs {}.tabs_title {display: flex;
}.title_item {flex:1;display: flex;justify-content: center;align-items: center;padding: 15rpx 0;
}.active{color: var(--themeColor);border-bottom: 5rpx solid currentColor;
}

【调用的wxml】

<!--pages/goods_list/index.wxml-->
<Tabs tabs="{{tabs}}" bindTabsItemChange="handleTabsItemChange"><block wx:if="{{tabs[0].isActive}}">综合</block><block wx:elif="{{tabs[1].isActive}}">销量</block><block wx:elif="{{tabs[2].isActive}}">价格</block>
</Tabs>

【调用的js】

// pages/goods_list/index.js
Page({/*** 页面的初始数据*/data: {tabs: [{id: 0,value: '综合',isActive: true,},{id: 1,value: '销量',isActive: false,},{id: 2,value: '价格',isActive: false,},],},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log(options)},// 标题的点击事件(从子组件传递过来)handleTabsItemChange(e) {const { index } = e.detaillet { tabs } = this.datatabs.forEach((v, i) => (i == index ? (v.isActive = true) : (v.isActive = false)))this.setData({tabs})}
})

小程序 --- Tab组件的封装相关推荐

微信小程序电子签名组件
微信小程序电子签名组件,封装抽离可复用,签名成功输出base64和临时文件路径,解决vant弹窗中使用导致背景滚动问题,宽度自适应,高度设置百分比,开箱即用! 文章目录一.效果图二.组件完整代码示 ...
小程序开发(5)-之封装组件
小程序的组件和页面的代码结构是不一样的,不是像vue.react那些一样,页面是通过Page生成,组件是通过Component,下面介绍下常用到的 #data 很明显和页面上定义的data没有差别 # ...
【小程序】一文学会微信小程序自定义组件封装
一.什么是自定义组件在实际开发过程中,经常会有代码复用的情况,即在不同的页面有类似结构的代码块,类似的代码反复出现,这样会增加代码维护成本,也会造成代码的高耦合,为了解决这一情况,微信小程序支持了更 ...
一步步教你实现微信小程序自定义组件
一步步教你实现微信小程序自定义组件更新时间:2022年03月21日 11:12:34 作者:naluduo233 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,下面这篇文章主 ...
app vue 真机运行_uni-app黑魔法：小程序自定义组件运行到H5平台
引言移动互联网的初期,囿于设备硬件性能限制,流量以原生App为主,iOS.Android是当时两大平台. 随着硬件及OS的更新换代,H5可承载的体验逐步完善,为提高开发效率.节约资源(复用代码)以及 ...
[转]小程序web-view组件
本文转自:https://www.cnblogs.com/-nothing-/p/7910355.html 1,web-view这个组件是什么鬼? 官网的介绍:web-view 组件是一个可以用来承载 ...
微信小程序 MinUI 组件库系列之 label 标签组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
微信小程序 MinUI 组件库系列之 badge 徽章组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...
微信小程序 MinUI 组件库系列之 avatar 头像组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多基础 ...

小程序 --- Tab组件的封装