微信小程序自定义组件开发源码
微信小程序自定义组件包括很多内容，比如小程序对话框、小程序背景等等，小编今天为大家找到了所有自定义组件的小程序开发源码，一起来看看吧!
Components
[Backdrop - 背景幕]
[Dialog - 对话框]
[Loading - 指示器]
[Toast - 提示框]
[Rater - 评分]
Backdrop - 背景幕
Backdrop
背景幕
保持背景幕 retain
释放背景幕 release
背景幕锁：{{ locks }}
const App = getApp()
Page({
data: {
locks: 0,
},
onLoad() {
this.$wuxBackdrop = App.wux(this).$wuxBackdrop
},
retain() {
this.$wuxBackdrop.retain()
this.setData({
locks: this.$wuxBackdrop.backdropHolds
})
},
release() {
this.$wuxBackdrop.release()
this.setData({
locks: this.$wuxBackdrop.backdropHolds
})
}
})
Dialog - 对话框
Dialog
对话框
Confirm Dialog
Alert Dialog
const App = getApp()
Page({
data: {
$wux: {
aaa: 1
}
},
onLoad() {
this.$wuxDialog = App.wux(this).$wuxDialog
},
openConfirm() {
const hideDialog = this.$wuxDialog.open({
title: '弹窗标题',
content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
confirm: () => console.log('confirm'),
cancel: () => console.log('cancel'),
})
// setTimeout(hideDialog, 3000)
},
openAlert() {
this.$wuxDialog.open({
showCancel: !1,
title: '弹窗标题',
content: '弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内',
confirm: () => console.log('confirm'),
})
}
})
Loading - 指示器
Loading
指示器
加载中提示
const App = getApp()
Page({
data: {},
onLoad() {
this.$wuxLoading = App.wux(this).$wuxLoading
},
showLoading() {
this.$wuxLoading.show({
text: '数据加载中',
})
setTimeout(() => {
this.$wuxLoading.hide()
}, 1500)
},
})
Toast - 提示框
Toast
提示框
成功提示
取消提示
禁止提示
文本提示
const App = getApp()
Page({
data: {},
onLoad() {
this.$wuxToast = App.wux(this).$wuxToast
},
showToast() {
this.$wuxToast.show({
type: 'success',
timer: 1500,
color: '#fff',
text: '已完成',
success: () => console.log('已完成')
})
},
showToastCancel() {
this.$wuxToast.show({
type: 'cancel',
timer: 1500,
color: '#fff',
text: '取消操作',
success: () => console.log('取消操作')
})
},
showToastErr() {
this.$wuxToast.show({
type: 'forbidden',
timer: 1500,
color: '#fff',
text: '禁止操作',
success: () => console.log('禁止操作')
})
},
showToastText() {
this.$wuxToast.show({
type: 'text',
timer: 1500,
color: '#fff',
text: '文本提示',
success: () => console.log('文本提示')
})
},
})
Rater - 评分
Rater
评分组件
Normal Usage
set default score = 5
change color
disabled = true
Your history score
Decimal score 3.7
custom font-size(15px)
custom star
Loving
Sunshine
Smilies
const App = getApp()
Page({
data: {},
onLoad() {
this.$wuxRater = App.wux(this).$wuxRater
this.$wuxRater.render('star', {
value: 5,
})
this.$wuxRater.render('changeColor', {
value: 3,
activeColor: '#04BE02',
})
this.$wuxRater.render('history', {
value: 3,
disabled: !0,
})
this.$wuxRater.render('decimal', {
value: 3.7,
disabled: !0,
})
this.$wuxRater.render('custom', {
value: 3,
fontSize: 15,
disabled: !0,
})
this.$wuxRater.render('loving', {
value: 3,
star: '♡',
})
this.$wuxRater.render('sunshine', {
value: 3,
star: '☼',
})
this.$wuxRater.render('smilies', {
value: 3,
star: '☻',
})
},
})
以上就是关于微信小程序自定义组件的全部代码了，有了这份代码，想要进行相应的自定义组件开发都会很简单，更多相关资料请关注微信小程序素材网。
微信小程序怎样写组件?如何写微信小程序组件?
小程序原生组件是什么?
自定义菜单跳转小程序怎么弄
上一篇：怎样编写小程序自定义tabbar
下一篇：自定义菜单跳转小程序怎么弄