微信小程序之自定义组件的应用
小程序支持自定义组件,下面是一个简单的购物车组件,实现的效果如图:
效果图
创建组件
在根目录创建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
})
}
})
微信小程序之自定义组件的应用的更多相关文章
- 微信小程序之自定义组件
在微信小程序项目中 肯定会存在很多功能和样式上相似的部分 面对这种情况 只是单单的ctrl+c ctrl+v 就显得很low了,而且也不便于后期维护那么这时候 使用微信小程序中的自定义组件功能就很合适 ...
- 微信小程序:自定义组件
为什么要学习自定义组件? 1.用上我自己的单词abc,我希望在页面中展示椭圆形的图片, 2.打开手机淘宝,假如现在要做一个企业级项目,里面有很多页面,首页存在导航模块,点击天猫,进入第二个页面,而第二 ...
- 微信小程序覆盖自定义组件样式
小程序官方文档明确指出,引入的第三方自定义组件,是不可以对其进行CSS样式覆盖的,但是我们还想要修改怎么办呢?自定义组件时会之定义个外部类,通过这个外部类来修改样式. 修改https://weapp. ...
- 微信小程序:自定义组件的数据传递
一.前言 如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来.下面介绍一个简单的组件和一个复杂的组件. 二.简单的组件(计数器) 1. 组件功能介绍 这个组件常见于外卖软件 ...
- 微信小程序开发---自定义组件
开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用:也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护.自定义组件在使用时与基础组件非常相似. 创建自定义组件 类似于页面, ...
- 微信小程序之自定义组件与使用
一般我们在定义了一个组件之后,为了复用,需要将它导出以提供给其他页面使用. 组件导出的关键字是 exprot default 没有加default时,例如: export class Template ...
- 微信小程序里自定义组件,canvas组件没有效果
methods: { /** * el:画圆的元素 * r:圆的半径 * w:圆的宽度 * 功能:画背景 */ drawCircleBg: function (el, r, w) { const ct ...
- 微信小程序中的组件使用1
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
- 【小程序】小程序开发自定义组件的步骤>>>>>>>>>小程序开发过程中报错:jsEnginScriptError
报错:jsEnginScriptError VM6342: jsEnginScriptError Component is not found in path "component/spac ...
随机推荐
- SHELL调用存储过程
1.测试用例 #!/bin/sh #日期变量可设成传入参数 #exec_date=`date +"%Y%m%d"` # -S 设置无提示模式, 该模式隐藏命令的 SQL*Plus ...
- 【SPL标准库专题(7)】 Datastructures:SplHeap & SplMaxHeap & SplMinHeap
堆(Heap)就是为了实现优先队列而设计的一种数据结构,它是通过构造二叉堆(二叉树的一种)实现.根节点最大的堆叫做最大堆或大根堆,根节点最小的堆叫做最小堆或小根堆.二叉堆还常用于排序(堆排序). 类摘 ...
- Oracle EBS 物化视图
怎么理解物化视图呢,先随意拿一个建物化视图的例子看一下. create materialized view EBS_ACCOUNTS_HIERARCHY_MV refresh complete on ...
- .Net 初步学习笔记之三---变量
一.存储变量的语法: 变量类型 变量名: 变量名=值: “=”号:把等号右边的值赋值给等号左边的变量 二.常用的变量 1.整数类型 int //只存整数,不能存小数 2.小数类型 double ...
- MySQL5.7多实例自动化部署脚本
一.安装说明 ------------------------------------------------------ mysql5.7.10_onekey_install.sh自动化部署脚本支持 ...
- jquery.validate,错误信息位置
好长时间没有用jquery.validate.js这个插件了,忘得差不多了.唉,好东西还是要经常拿出来看看的,今天用jquery.validate来做一个小东西,遇到一个问题,就是错误提示信息的位置问 ...
- 微信小程序里使用过滤器
新建一个 filter.wxs文件 function formatString(val, len) { if (val.length > len) { return val.substring( ...
- mysql 5.7.16 忘记root 密码 如何修改root密码
今天在电脑上安装 mysql5.7.16 (压缩包)时,在初始化data文件夹之后,没有记住密码,DOS框没有显示,没办法,为了学习一下怎么修改密码,在网上找了好多方法去解决,最终还是解决了,下面来 ...
- Linux之添加交换分区
Linux下的交换分区我们可以随意改变大小,如果说日常生活中分区不够用,今天我们来举个例子如何添加. 1.首先是使用dd命令创建一个空文件,这个空文件的大小就是你要继续添加的swap的大小,比如我这里 ...
- Lr原理初识-hc课堂笔记
showslow web服务器-apache.ngix devops 需求调研-占1/3的时间. 架构拓扑图 APP端测试工具:JT.Vtest 进程是管理单元.线程是执行单元. 虚拟用户和真实用户是 ...