Weex例子——Toast

最新推荐文章于 2022-03-07 20:58:34 发布

alisure

最新推荐文章于 2022-03-07 20:58:34 发布

阅读量3.6k

点赞数 1

分类专栏： Weex 文章标签： toast web weex

本文链接：https://blog.csdn.net/ALISURE/article/details/54429583

版权

Weex 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

链接：

查看效果

效果：

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" οnclick="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>