博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信小程序-自定义组件
阅读量:4085 次
发布时间:2019-05-25

本文共 6008 字,大约阅读时间需要 20 分钟。

 https://github.com/skyvow/wux

微信小程序-自定义组件

Components

  • [Backdrop - 背景幕]

  • [Dialog - 对话框]

  • [Loading - 指示器]

  • [Toast - 提示框]

  • [Rater - 评分]

Backdrop - 背景幕

Backdrop
背景幕
背景幕锁:{
{ 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
对话框
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: '☻',         })    },})

项目截图:

转载地址:http://cihni.baihongyu.com/

你可能感兴趣的文章
缓存篇-使用Redis进行分布式锁应用
查看>>
缓存篇-Redisson的使用
查看>>
phpquery抓取网站内容简单介绍
查看>>
找工作准备的方向(4月22日写的)
查看>>
关于fwrite写入文件后打开查看是乱码的问题
查看>>
用结构体指针前必须要用malloc,不然会出现段错误
查看>>
Linux系统中的美
查看>>
一些实战项目(linux应用层编程,多线程编程,网络编程)
查看>>
我觉得专注于去学东西就好了,与世无争。
查看>>
原来k8s docker是用go语言写的,和现在所讲的go是一个东西!
查看>>
STM32CubeMX 真的不要太好用
查看>>
STM32CubeMX介绍、下载与安装
查看>>
不要买铝合金机架的无人机,不耐摔,易变形弯曲。
查看>>
ACfly也是基于FreeRTOS的
查看>>
F330装GPS的位置
查看>>
pixhawk也可以用Airsim仿真
查看>>
《无人机电机与电调技术》可以看看
查看>>
我发现七月在线的GAAS课程基本都讲到了
查看>>
电机堵转
查看>>
carzepony也在想往FreeRTOS上迁移
查看>>