更新记录

1.2（2020-07-07） 下载此版本

• 修改 props内不小心用了data，修改为gridsData；indicatorDots默认值修改为false；indicatorDotsHieght默认值修改为0

• 新增 hideText、iconWidth、iconHeight、gridPaddingTop、gridPaddingBottom、gridPaddingLeft、gridPaddingRight等属性

1.1（2020-07-06） 下载此版本

• 新增 支持 App nvue

• 修复 控制单项高度时 总高度不改变问题

• 优化 图标的显示不判断是否存在图片路径(保持占位)

1.0（2020-05-08） 下载此版本

• 首次发布

平台兼容性

• QQ交流群: 750104037 点我加入

• 快速指引

• 示例项目目录结构

• Attributes

• Events

• Methods

• 示例代码

示例项目目录结构

|-- QS-Grids
    |-- App.vue
    |-- main.js
    |-- manifest.json
    |-- pages.json
    |-- README.md
    |-- components
    |   |-- QS-Grids    //组件文件夹
    |       |-- QS-Grid.vue 
    |       |-- QS-Grids.vue    //核心vue文件
    |       |-- css
    |           |-- box-sizing-border-box.css
    |-- pages
    |   |-- index
    |       |-- index.vue
    |-- static
        |-- logo.png

Attributes

props: {
    row: { // 单行个数
        type: [Number, String],
        default: 5
    },
    col: {  //列数
        type: [Number, String],
        default: 2
    },
    padding: {  //内边距
        type: [Number, String],
        default: 0
    },
    iconSizeScale: {    //图标比例
        type: [Number, String],
        default: .8
    },
    gridTextColor: {    //文本颜色
        type: String,
        default: '#000'
    },
    gridTextSize: { //文本大小
        type: String,
        default: '28rpx'
    },
    gridTextMarginTop: {    //文本顶部外边距
        type: [Number, String],
        default: '10px'
    },
    mode: { //模式 swiper 或者 default
        type: String,
        default: ''
    },
    props: {    //配置对象 { imageField: '图标地址属性名', textField: '文本内容属性名' }
        type: Object,
        default() { return {} }
    },
    gridOutline: {  //线条 , 目前 vue支持
        type: String,
        default: 'none'
    },
    gridPadding: {  //单个的内边距
        type: [Number, String],
        default: '15rpx'
    },
    iconBorderRadius: { //图标圆角值
        type: [Number, String],
        default: '0'
    },

    indicatorDots: {    //同官方swiper
        type: [Boolean, String],
        default: false
    },
    indicatorDotsHieght: {  //同官方swiper
        type: [Number, String],
        default: 0
    },
    duration: { //同官方swiper
        type: [Number, String],
        default: 500
    },
    circular: { //同官方swiper
        type: [String, Boolean],
        default: false
    },
    defCurrent: {   //默认项
        type: [String, Number],
        default: 0
    },
    previousMargin: {   //同官方swiper
        type: String,
        default: '0px'
    },
    nextMargin: {   //同官方swiper
        type: String,
        default: '0px'
    },
    indicatorColor: {   //同官方swiper
        type: String,
        default: 'rgba(0, 0, 0, .3)'
    },
    indicatorActiveColor: { //同官方swiper
        type: String,
        default: '#000000'
    },
    autoplay: { //同官方swiper
        type: [String, Boolean],
        default: false
    },
    interval: { //同官方swiper
        type: [String, Number],
        default: 5000
    },
    gridsData: {    //绑定的 grids数据
        type: Array,
        default: ()=>[]
    },
    hideText: { //隐藏文本块
        type: [String, Boolean],
        default: false
    },
    iconWidth: {    //手动指定图标宽度
        type: [String, Number],
        default: 0
    },
    iconHeight: {   //手动指定图标高度
        type: [String, Number],
        default: 0
    },
    gridPaddingTop: {   //单个grid上内边距, nvue专有，若指定则gridPadding值失效
        type: [Number, String],
        default: 0
    },
    gridPaddingBottom: {    //单个grid下内边距, nvue专有，若指定则gridPadding值失效
        type: [Number, String],
        default: 0
    },
    gridPaddingLeft: {  //单个grid左内边距, nvue专有，若指定则gridPadding值失效
        type: [Number, String],
        default: 0
    },
    gridPaddingRight: { //单个grid右内边距, nvue专有，若指定则gridPadding值失效
        type: [Number, String],
        default: 0
    }
}

Events

Methods

示例代码

<template>
    <view>
        <QSGrids 
        ref="QSGrids" 
        mode="swiper" 
        gridAddHeight="20"
        iconBorderRadius="50%"
        @gridClick="gridClick"></QSGrids>
        <view style="height: 30px;">

        </view>
        <QSGrids
        ref="QSGrids2"
         gridOutline="#f2f2f2 solid 1px"
        @gridClick="gridClick"></QSGrids>
    </view>
</template>

import QSGrids from '@/components/QS-Grids/QS-Grids.vue'
export default {
    components: {QSGrids},
    data() {
        return {
            grids: []
        }
    },
    onReady() {
        this.setGridData();
    },
    methods: {
        setGridData() {
            const grids = Array(15).fill('').map((item, index)=>{return { text: String(index), img: 'http://att3.citysbs.com/200x200/hangzhou/2020/04/15/11/dd6719bd4287d9efd49434c43563a032_v2_.jpg' }});
            this.grids = grids;
            this.$refs.QSGrids.setData(grids)
            this.$refs.QSGrids2.setData(grids)
        },
        gridClick(index) {
            uni.showToast({
                title: this.grids[index].text
            })
        }
    }
}