微信小程序-自定义组件
https://github.com/skyvow/wux
微信小程序-自定义组件
Components
-
[Backdrop - 背景幕]
-
[Dialog - 对话框]
-
[Loading - 指示器]
-
[Toast - 提示框]
-
[Rater - 评分]
Backdrop - 背景幕
<import src="../../components/backdrop.wxml"/>
<template is="backdrop" data="{{ ...$wux.backdrop }}"/>
<view class="page">
<view class="page__hd">
<view class="page__title">Backdropview>
<view class="page__desc">背景幕view>
view>
<view class="page__bd">
<view class="weui-btn-area ezpop">
<button class="weui-btn" type="default" bindtap="retain">保持背景幕 retainbutton>
<button class="weui-btn" type="primary" bindtap="release">释放背景幕 releasebutton>
view>
<view class="text-center">背景幕锁：{{ locks }}view>
view>
view>
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 - 对话框
<import src="../../components/dialog.wxml"/>
<template is="dialog" data="{{ ...$wux.dialog }}"/>
<view class="page">
<view class="page__hd">
<view class="page__title">Dialogview>
<view class="page__desc">对话框view>
view>
<view class="page__bd">
<view class="weui-btn-area">
<button class="weui-btn" type="default" bindtap="openConfirm">Confirm Dialogbutton>
<button class="weui-btn" type="default" bindtap="openAlert">Alert Dialogbutton>
view>
view>
view>
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 - 指示器
<import src="../../components/loading.wxml"/>
<template is="loading" data="{{ ...$wux.loading }}"/>
<view class="page">
<view class="page__hd">
<view class="page__title">Loadingview>
<view class="page__desc">指示器view>
view>
<view class="page__bd">
<view class="weui-btn-area">
<button class="weui-btn" type="default" bindtap="showLoading">加载中提示button>
view>
view>
view>
const App = getApp()
Page({
data: {},
onLoad() {
this.$wuxLoading = App.wux(this).$wuxLoading
},
showLoading() {
this.$wuxLoading.show({
text: '数据加载中',
})
setTimeout(() => {
this.$wuxLoading.hide()
}, 1500)
},
})
Toast - 提示框
<import src="../../components/toast.wxml"/>
<template is="toast" data="{{ ...$wux.toast }}"/>
<view class="page">
<view class="page__hd">
<view class="page__title">Toastview>
<view class="page__desc">提示框view>
view>
<view class="page__bd">
<view class="weui-btn-area">
<button class="weui-btn" type="default" bindtap="showToast">成功提示button>
<button class="weui-btn" type="default" bindtap="showToastCancel">取消提示button>
<button class="weui-btn" type="default" bindtap="showToastErr">禁止提示button>
<button class="weui-btn" type="default" bindtap="showToastText">文本提示button>
view>
view>
view>
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 - 评分
<import src="../../components/rater.wxml"/>
<view class="page">
<view class="page__hd">
<view class="page__title">Raterview>
<view class="page__desc">评分组件view>
view>
<view class="page__bd">
<view class="weui-cells__title">Normal Usageview>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell">
<view class="weui-cell__bd">set default score = 5view>
<view class="weui-cell__ft">
<template is="rater" data="{{ name, ...$wux.rater.star }}"/>
view>
view>
<view class="weui-cell">
<view class="weui-cell__bd">change colorview>
<view class="weui-cell__ft">
<template is="rater" data="{{ name, ...$wux.rater.changeColor }}"/>
view>
view>
view>
<view class="weui-cells__title">disabled = trueview>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell">
<view class="weui-cell__bd">Your history scoreview>
<view class="weui-cell__ft">
<template is="rater" data="{{ name, ...$wux.rater.history }}"/>
view>
view>
<view class="weui-cell">
<view class="weui-cell__bd">Decimal score 3.7view>
<view class="weui-cell__ft">
<template is="rater" data="{{ name, ...$wux.rater.decimal }}"/>
view>
view>
<view class="weui-cell">
<view class="weui-cell__bd">custom font-size(15px)view>
<view class="weui-cell__ft">
<template is="rater" data="{{ name, ...$wux.rater.custom }}"/>
view>
view>
view>
<view class="weui-cells__title">custom starview>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell">
<view class="weui-cell__bd">Lovingview>
<view class="weui-cell__ft">
<template is="rater" data="{{ name, ...$wux.rater.loving }}"/>
view>
view>
<view class="weui-cell">
<view class="weui-cell__bd">Sunshineview>
<view class="weui-cell__ft">
<template is="rater" data="{{ name, ...$wux.rater.sunshine }}"/>
view>
view>
<view class="weui-cell">
<view class="weui-cell__bd">Smiliesview>
<view class="weui-cell__ft">
<template is="rater" data="{{ name, ...$wux.rater.smilies }}"/>
view>
view>
view>
view>
view>
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: '☻',
})
},
})
项目截图: