脚本宝典收集整理的这篇文章主要介绍了微信小程序组件—wxui的使用,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
比较简单 直接上码
Toast框
<import src="../../components/toast.wXMl"/>
<!-- is="toast" 匹配组件中的toast提示 如果用diaLOG的话这就是dialog -->
<template is="toast" data="{{ ...$wux.toast }}"/>
<view class="page">
<view class="page_title">
<view class="page_desc" style="text-align:center">提示框</view>
</view>
<view>
<view class="weui-BTn-area">
<button class="weui-btn" type="Primary" bindtap="showToast">成功提示</button>
<button class="weui-btn" type="PRimary" bindtap="showToastCancel">取消提示</button>
<button class="weui-btn" type="primary" bindtap="showToastErr">禁止提示</button>
<button class="weui-btn" type="primary" bindtap="showToastText">文本提示</button>
</view>
</view>
</view>
js
const App = getApp()
Page({
data: {},
onLoad() {
this.$wuxToast = App.wux(this).$wuxToast
},
showToast() {
const _this =this;
_this.$wuxToast.show({
type: 'success',
timer: 1500,
color: '#fff',
text: '已完成',
// 成功之后的返回,想当于下面的success
success: () => console.log('已完成')
// success: function(){
// console.log('已完成')
// }
})
},
showToastCancel() {
const _this =this;
_this.$wuxToast.show({
type: 'cancel',
timer: 1500,
color: '#fff',
text: '取消操作',
success: () => console.log('取消操作')
})
},
showToastErr() {
const _this =this;
_this.$wuxToast.show({
type: 'forbidden',
timer: 1500,
color: '#fff',
text: '禁止操作',
success: () => console.log('禁止操作')
})
},
showToastText() {
const _this =this;
_this.$wuxToast.show({
type: 'text',
timer: 1500,
color: '#fff',
text: '文本内容',
success: () => console.log('文本内容')
})
},
})
注意点
在app.js中要引入wxui
import wux From 'components/wux'
App({
onLaunch() {
console.log('onLaunch')
},
onShow() {
console.log('onShow')
},
onHide() {
console.log('onHide')
},
// 通过scope来引入wux函数
wux: (scope) => new wux(scope)
})
@H_211_360@
][2]
demo地址
https://github.COM/tengwei30/xiaochengxu-modal.git
以上是脚本宝典为你收集整理的微信小程序组件—wxui的使用全部内容,希望文章能够帮你解决微信小程序组件—wxui的使用所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。