Weex例子——Toast

来源：互联网发布：数据挖掘工程师就业编辑：程序博客网时间：2024/05/21 01:50

不想写废话，直接上效果。

链接：

查看效果

效果：

Toast

代码：

toast.we文件

<template>        <div class="toast-wrapper">            <div id="toast" class="toast">                <text class="toast-text">{{toastText}}</text>            </div>        </div></template><style>    .toast-wrapper{        /*固定弹出位置*/        position: fixed;        /*最大宽度*/        width: 550px;        /*整体居中*/        margin-left: 100px;        /*距离底部位置*/        bottom: 120px;        /*内容居中*/        justify-content: center;        align-items: center;    }    .toast{        /*Toast圆角和背景*/        border-radius: 10px;        background-color: #444444;        /*文字居中*/        justify-content: center;        align-items: center;        /*默认为0，用于弹出的效果*/        opacity: 0;    }    .toast-text{        /*字体大小和颜色*/        font-size: 28px;        color: #ffffff;        /*文字padding*/        padding-top: 15px;        padding-bottom: 15px;        padding-left: 25px;        padding-right: 25px;    }</style><script>    module.exports = {        data:{            toastText:''        },        created:function () {            var self = this;            /*绑定toast事件*/            this.$on('toast', function (e) {                /*显示toast*/                self.toast(e.detail);            }.bind(this));        },        methods: {            toast: function (text) {                this.toastText = text;                var self = this;                var animation = require('@weex-module/animation');                /*给 id="toast" 的元素 添加显示动画*/                animation.transition(self.$el('toast'), {                    styles: {opacity: 1,},                    duration: 400,                }, function () {                    /*显示动画完成后设置定时器*/                    setTimeout(function () {                        /*1000ms后对 id="toast" 的元素进行隐藏动画*/                        animation.transition(self.$el('toast'), {                            styles: {opacity: 0,},                            duration: 800,                        }, function () {                        });                    },1000);                });            },        }    }</script>

test-toast.we

<template>    <div>        <div class="click" onclick="test()">            <text style="font-size: 60px; color: #ffffff">Toast</text>        </div>        <toast id="toast"></toast>    </div></template><style>    .click{        height: 100px;        width: 200px;        margin-left: 275px;        background-color: #00bfff;        justify-content: center;        align-items: center;    }</style><script>    module.exports = {        methods: {            test: function (e) {                this.$vm('toast').$emit('toast','我是Toast.\n--ALISURE');            }        }    }</script>

0 0