微信小程序组件---grid实现行和列同时滑动

在微信小程序里,要实现数据列表可以随意滑动的效果:

        当首行左右滑动时,数据区域同步左右滑动;

        当首列上下滑动时,数据区域同步上下滑动;

        当数据区域左右滑动时,首行与之同步滑动;

        当数据区域上下滑动时,首列与之同步滑动;

        当数据区域斜角滑动时,列和行同步滑动。

如何使用该组件呢?

1、在你的界面文件 wxml 对应的 json 文件中引入该组件

 2、在 wxml 文件里使用该组件

3、在对应的 js 文件里为该组件初始化数据

 需要在 data 元素里增加 adapter 元素及相关子元素。

adapter 所包含重要属性说明:

keyName:数据列表里每一行数据的唯一字段名。

headCols:列头数据,数组类型,每一个数组元素格式为:{ title: columnText, name: columnName, width: 80, titleAlign: 'center', dataAlign: 'center', color: 'black', bgColor: 'white', fontSize: 12, smart: false}

dataStore:列表数据,数组类型,每一个数组元素为行数据,格式为:{ columnName1: { img: '', imgWidth: 0, imgHeight: 0, val: '', color: '', bgColor: '', fontSize: 12, textWidth: 60, smart: null},
columnName2: { img: '', imgWidth: 0, imgHeight: 0, val: '', color: '', bgColor: '', fontSize: 12, textWidth: 60, smart: null},
columnName3: { img: '', imgWidth: 0, imgHeight: 0, val: '', color: '', bgColor: '', fontSize: 12, textWidth: 60, smart: null} }

init:为初始化数据提供的方法。参数 e 为 adapter 对象,包含:keyName、headCols、dataStore、init、showData、thisObj,其中 showData 方法在数据初始化完成后显示数据,thisObj 等同于当前 Page 对象。

组件下载地址:

https://download.csdn.net/download/u010465417/11468176


版权声明:本文为u010465417原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。