微信小程序之自定义组件的应用
2024-10-19 10:26:40
小程序支持自定义组件，下面是一个简单的购物车组件，实现的效果如图：
效果图
创建组件
在根目录创建components目录，然后创建计数组件 count 如图：
组件内容
<!--components/count/count.wxml-->
<view class='count'>
<view class='del' bindtap='bindDel'> - </view>
<view class='num'> {{num}} </view>
<view class='add' bindtap='bindAdd'> + </view>
</view>
/* components/count/count.wxss */
.count {
border: 1px solid #bbb;
width: 400rpx;
padding: 40rpx;
display: flex;
align-items: center;
justify-content: center;
}
.count view {
font-size: 36rpx;
height: 80rpx;
width: 80rpx;
border: 1px solid #dfdcdc;
display: flex;
align-items: center;
justify-content: center;
}
.del, .add {
background: #dfdcdc;
}
.count .num {
color: #f22
}
count.json:
{
"component": true,
"usingComponents": {}
}
// components/count/count.js
Component({
/**
* 组件的属性列表
*/
properties: {
num: { // 属性名
type: Number, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: 0 // 属性初始值（可选
},
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
bindDel () {
let { num } = this.data
if (num < 1) {
return
}
this.setData({
num: num - 1
})
this.triggerEvent('changeCount', this.data.num) // 自定义组件触发事件时，需要使用 triggerEvent 方法, 这里触发父组件的changeCount方法，后面的this.data.num传递给父组件
},
bindAdd () {
let { num } = this.data
this.setData({
num: num + 1
})
console.log(num, this.data.num)
this.triggerEvent('changeCount', this.data.num) // 自定义组件触发事件时，需要使用 triggerEvent 方法
}
}
})
组件引入
在父组件index中引入组件：
index.wxml:
<view style="margin: 20rpx 0;"> ------ 父组件 ------ </view>
<view>单价：{{price}}</view>
<view>总价：{{price * num}}</view>
<view style="margin: 180rpx 0 30rpx;"> ------ 子组件 ------ </view>
<!-- 当自定义组件触发“changeCount”事件时，调用“onChangeCount”方法 -->
<count num='{{num}}' bind:changeCount='onChangeCount'></count>
注册组件：
index.json:
{
"usingComponents": {
"count": "/components/count/count"
}
}
index.js:
Page({
data: {
num: 1,
price: 50
},
onChangeCount (e) {
console.log(e.detail) // e.detail可以拿到组件通过this.triggerEvent传出来的数据
this.setData({
num: e.detail
})
}
})
最新文章
- 去掉windows8.1鸡肋的开始按钮
- Linux驱动开发学习笔记(1)：LINUX驱动版本的hello world
- 本函数用来改变目前 php 执行的目录到新的 directory 目录中
- jquerymobile动态添加元素之后不能正确渲染解决方法
- cdoj 1143 传输数据 最大流
- lvs+heartbeat搭建负载均衡高可用集群
- Grand Central Dispatch(GCD)详解(转)
- hdu3038（并查集）
- 老李案例分享：定位JAVA内存溢出
- Android之RxJava详解
- JAVA设计模式初探之适配器模式
- jsp/servlet学习一之servlet初窥
- sublime text3全局设置
- 机器学习:K-Means/K-Means++
- lvm逻辑卷扩容
- Ajax与select标签的组合运用
- PHP和MySQL实现消息队列
- listener.ora 与 tnsnames.ora
- java判断邮件是否发送成功
- css两列等高布局