zoukankan      html  css  js  c++  java
  • "幕帘"组件:<curtain> —— 快应用组件库H-UI

    Screenshot_20200417_161305_com.huawei.fastapp

    <import name="curtain" src="../Common/ui/h-ui/feedback/c_curtain"></import>
    <import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
    <template>
        <div class="container">
            <curtain id="curtain"></curtain>
            <h-button text="基本实例" block="true" type="info" onclick="handleClick1"></h-button>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    
    <script>
        export default {
            private: {},
            handleClick1() {
                this.$child('curtain').showCurtain({
                    src: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/curtain.png'
                });
            }
        }
    </script>
    

    Screenshot_20200417_161313_com.huawei.fastapp

    点击幕帘广告后页面转向:

    Screenshot_20200417_161317_com.huawei.fastapp

    <import name="curtain" src="../Common/ui/h-ui/feedback/c_curtain"></import>
    <import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
    <template>
        <div class="container">
            <curtain id="curtain"></curtain>
            <h-button text="点击转向" block="true" type="info" onclick="handleClick2"></h-button>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    
    <script>
        export default {
            private: {},
            handleClick2(){
                this.$child('curtain').showCurtain({
                    src: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/curtain.png',
                    uri: '/About'
                });
            }
        }
    </script>
    

    Screenshot_20200417_161340_com.huawei.fastapp

    <import name="curtain" src="../Common/ui/h-ui/feedback/c_curtain"></import>
    <import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
    <template>
        <div class="container">
            <curtain id="curtain"></curtain>
            <h-button text="设置关闭按钮的位置" block="true" type="info" onclick="handleClick3"></h-button>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    
    <script>
        export default {
            private: {},
            handleClick3(){
                this.$child('curtain').showCurtain({
                    src: 'https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/curtain.png',
                    uri: '/About',
                    placement: 'bottom'
                });
            }
        }
    </script>
    

    扫码体验

  • 相关阅读:
    【转】XenServer的架构之Xenopsd组件架构与运行机制
    【转】XenServer架构之XAPI的调用流程
    关于JS面向对象、设计模式、以及继承的问题总结
    表格排序的具体案例(包括数字和汉字排序)
    call.apply.冒充对象继承
    ES6的学习之路(基础知识总结)
    ES6的基础知识总结
    JS预解释的总结
    函数执行的作用域问题
    JS中的闭包问题总结
  • 原文地址:https://www.cnblogs.com/cloud-dev/p/mu-lianzu-jianltcurtaingt--kuai-ying-yong-zu-jian-.html
Copyright © 2011-2022 走看看