微信小程序組件—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)
})

][2]

demo地址

https://github.com/tengwei30/xiaochengxu-modal.git