zoukankan      html  css  js  c++  java
  • "分页器"组件:<pagination> —— 快应用组件库H-UI

    <import name="pagination" src="../Common/ui/h-ui/navigation/c_pagination"></import>
    <template>
        <div class="container">
            <pagination id="pagination1" total="48"></pagination>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    

    <import name="pagination" src="../Common/ui/h-ui/navigation/c_pagination"></import>
    <template>
        <div class="container">
            <pagination id="pagination2" total="48" page="1" size="20"></pagination>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    

    <import name="pagination" src="../Common/ui/h-ui/navigation/c_pagination"></import>
    <template>
        <div class="container">
            <pagination id="pagination3" total="48" prev-text="Prev" next-text="Next"></pagination>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    

    <import name="pagination" src="../Common/ui/h-ui/navigation/c_pagination"></import>
    <template>
        <div class="container">
            <pagination id="pagination4" total="48" pagination-mode="1"></pagination>
            <pagination id="pagination5" total="48" pagination-mode="2"></pagination>
            <pagination id="pagination6" total="48" pagination-mode="3"></pagination>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    

    <import name="pagination" src="../Common/ui/h-ui/navigation/c_pagination"></import>
    <template>
        <div class="container">
            <pagination id="pagination7" total="48"></pagination>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    
    <script>
        import prompt from '@system.prompt'
    
        export default {
            private: {},
            onInit() {
                this.$on('pagination7_dispatchEvt',this.dispatchEvt)
            },
            dispatchEvt(evt) {
                // 弹窗显示详细说明
                prompt.showToast({
                    message: evt.detail.value,
                    duration: 1,
                    gravity: 'top'
                })
            }
        }
    </script>
    

    扫码体验

  • 相关阅读:
    日志组件一:Log4j
    HTTPS加密那点事--轻松秒懂HTTPS非对称加密
    图解Git
    Python 迭代器 & __iter__方法
    Fiddler 抓包工具总结
    Python使用struct处理二进制(pack和unpack用法)
    Python binascii
    常见证书格式及相互转换
    MyBatis Generator 详解
    MyBatis学习总结(八)——Mybatis3.x与Spring4.x整合
  • 原文地址:https://www.cnblogs.com/cloud-dev/p/fen-ye-qizu-jianltpaginationgt--kuai-ying-yong-zu-.html
Copyright © 2011-2022 走看看