zoukankan      html  css  js  c++  java
  • 小程序开发-IView Weapp组件库List 列表的使用

    IView Weapp List列表

    1. 引入List组件

    "usingComponents": {
        "i-cell-group": "../../dist/cell-group/index",
        "i-cell": "../../dist/cell/index"
    }
    

    2. 在wxml中使用i-cell-groupi-cell组件

    <i-cell-group>
        <i-cell title="开关" is-link>
            <i-icon slot="icon" type="activity" size="28" color="#80848f" />
        </i-cell>
        <i-cell title="跳转到首页" is-link url="/pages/index"></i-cell>
        <i-cell title="只有 footer 点击有效" is-link url="/pages/logs/logs" only-tap-footer></i-cell>
        <i-cell title="开关">
            <switch slot="footer" checked />
        </i-cell>
    </i-cell-group>
    

    注:上面使用了i-icon组件在列表的某一栏增加图标

    3. 最终效果

    4. 其他参数

    属性 说明 类型 默认值
    i-class 自定义 class 类名 String -
    title 左侧标题 String -
    label 标题下方的描述信息 String -
    value 右侧内容 String -
    only-tap-footer 只有点击 footer 区域才触发 tab 事件 Boolean false
    is-link 是否展示右侧箭头并开启尝试以 url 跳转 null -
    url 当 isLink 设置为 true 时,点击 cell 会尝试跳转到该路径 String -
    link-type 链接类型,可选值为 navigateTo,redirectTo,switchTab,reLaunch String navigateTo

    样式效果还是非常棒的~~

  • 相关阅读:
    redis应用场景
    redis 持久化
    vue.jsv-if 的key值问题
    laravel 上线注意事项 (ubuntu lamp)
    laravel 不同表用户登录,后台跳转问题
    Laravel 5.5 不同用户表登录认证(前后台分离)
    记录laravel 数据填充问题
    Git 版本控制器详解
    Ubuntu Apache多站点配置
    Spring的注解@Qualifier小结
  • 原文地址:https://www.cnblogs.com/limaostudio/p/13680095.html
Copyright © 2011-2022 走看看