更新记录

1.0.0(2019-11-22) 下载此版本

点击某项:1、跳转某个页面 2、不跳转页面,返回被点击的数据


平台兼容性

  1. 引入组件并注册

    import swGrid from '@/components/sw-grid/sw-grid.vue'
    export default {
    components:{ swGrid}
    }
  2. 页面中引入组件

    <sw-grid :column="4" :gridList="gridList" :border="true" @tapGrid="tapGrid"></sw-grid>
  3. gridList 数据格式

    //提示:如果点击某项,不进行跳转页面,那么请添加type属性为click
    gridList:[
       {
           title:'我的组件',
           subList:[
               {
                   src:'/static/img/logo.png',  name:'过滤栏', url:"/pages/home/release", type:'click'
               },
               {
                   src:'/static/img/logo.png',  name:'过滤栏', url:"/pages/home/release"
               },
               {
                   src:'/static/img/logo.png',  name:'过滤栏', url:"/pages/home/release"
               },{
                   src:'/static/img/logo.png',  name:'过滤栏', url:"/pages/home/release"
               },
               {
                   src:'/static/img/logo.png',  name:'过滤栏', url:"/pages/home/release"
               }
           ]
       },
       {
           title:'我的任务',
           subList:[
               {
                   src:'/static/img/logo.png',  name:'过滤栏', url:"/pages/home/release", type:'click'
               },
               {
                   src:'/static/img/logo.png',  name:'过滤栏', url:"/pages/home/release"
               },
               {
                   src:'/static/img/logo.png',  name:'过滤栏', url:"/pages/home/release"
               },{
                   src:'/static/img/logo.png',  name:'过滤栏', url:"/pages/home/release"
               },
               {
                   src:'/static/img/logo.png',  name:'过滤栏', url:"/pages/home/release"
               }
           ]
       }
    ]
  4. 组件属性

    属性名称 属性解释 默认值
    column 列数 4
    gridList 数据 -
    border 是否显示边框
  5. 事件监听

    //当sublist中列表有type为click的时候,表示此项只需要点击反馈,不需要进行页面的切换跳转
    //当不存在type=click的时候,进行页面的跳转,跳转路径为您的url,即页面路径
    //提示,若您的url为一个外链,请集中跳转至某个页面使用webview组件进行链接
    methods : {
       tapGrid ( data ) {
           console.log(data)
           //{"item":{"src":"/static/img/logo.png","name":"过滤栏","url":"/pages/home/release","type":"click"},"index":0}
    
       }
    }
    

隐私、权限声明

1. 本插件需要申请的系统权限列表:

wu

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

wu

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

wu

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问