目录
1.我们利用Vant组件库来制作我的个人信息 页面:Vant Weapp - 轻量、可靠的小程序 UI 组件库
5.在index.wxml里写入一个按钮,在index.wxss中写按钮的样式
7.2 在index.wxml中利用{ {title}}来接住me.wxml里title传递过来的值,这样页面就有效果了
index.wxml中border-radius运用三目判断点击购买是否会变成胶囊按钮
一、自定义组件的运用
1.我们利用Vant组件库来制作我的个人信息 页面:Vant Weapp - 轻量、可靠的小程序 UI 组件库
2.注意先看文档:快速上手,和自定义组件介绍页面
3.在Components文件夹下新建文件夹取名叫mybutton
4.在mybutton文件夹下新建Component 取名叫index
会自动创建组件index 4件套
在js中page开头的是页面 component开头的是组件
5.在index.wxml里写入一个按钮,在index.wxss中写按钮的样式
5.1 在index.wxml里写入一个按钮
<view class="button">默认按钮</view>5.2在index.wxss中写按钮的样式
.button{
display: inline-block;
padding: 20rpx 25rpx;
background-color: crimson;
color: white;
}5.3在pages下创建me文件页面
6.在me.json和me.wxml中引用自定义组件
6.1在me.json
{
"usingComponents": {
"my-button":"/components/mybutton/index"
}
}6.2在me.wxml中引用自定义组件
<my-button></my-button>这样就在我的页面中,创建了一个默认按钮
7.me.wxss和me.wxml中书写:
效果:
7.1 me.wxml 的title在mybutton中的index.js中声明,这样就可以是的默认按钮的值,可以被赋值为title中的值
properties相当于vue中的props的效果
7.2 在index.wxml中利用{ {title}}来接住me.wxml里title传递过来的值,这样页面就有效果了
效果
7.3 自定义新属性color
效果
7.4 自定义新属性round
index.wxml中border-radius运用三目判断点击购买是否会变成胶囊按钮
效果
二、为组件添加自定义事件
在index.js中修改了一段代码,详见完整代码内容,解决了连续双击两次执行三次打印的问题
完整代码:
mybutton/index.js
// components/mybutton/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
round: { //声明自定义属性round,定义圆角,默认为false
type: Boolean,
value: false
},
color: {//声明自定义属性color,定义背景色
type: String,
value: 'crimson'
},
title: { //声明自定义属性title
type: String,
value: '默认按钮'
}
},
/**
* 组件的初始数据
*/
data: {
last: 0 //保存上次点击按钮的时间毫秒数
},
/**
* 组件的方法列表
*/
methods: {
handleTap(){//单击button时触发
let now = new Date().getTime()//当前时间毫秒数
let last = this.data.last
if(now-last < 350){//达到了双击的条件
//需要主动触发父组件的doubletap事件,通知父组件
this.triggerEvent("doubletap")
this.data.last = 0
} else {
this.data.last = now
}
}
}
})
mybutton/index.js
{
"component": true,
"usingComponents": {}
}mybutton/index.wxml
<view class="button"
style="background-color: {
{color}};border-radius:{
{round?'100px':'3px'}};"
bindtap="handleTap">{
{title}}</view>
mybutton/index.wxss
.button{
display: inline-block;
padding: 20rpx 25rpx;
background-color: crimson;
color: white;
}pages/me/me.js
handleDoubletap(){
console.log('双击么么哒...')
},
pages/me/me.json
{
"usingComponents": {
"my-button":"/components/mybutton/index"
}
}pages/me/me.wxml
<my-button></my-button>
<my-button title="登录" color="#36D"></my-button>
<my-button title="注册"></my-button>
<my-button
round
title="点击购买"
color="#61f"></my-button>
<my-button title="双击么么哒" bind:doubletap="handleDoubletap"></my-button>
pages/me/me.wxss
my-button {
display: block;
margin: 10rpx;
}