微信小程序】布局插件：wxgrid

http://blog.csdn.net/wowkk/article/details/52739490

微信小程序发布，web端的插件基本都用不了。接下来应该会有不少微信小程序插件出现吧……

微信小程序其实是C/S思想，纯web前端开发人员应该不大喜欢它的写法。

前端开发最重要的就是布局的编写，C/S布局最方便的应该就是“表格”布局，参考.NET的WPF里面Grid，我先简单写一个表格布局的插件。

wxgrid插件含有wxgrid.js和wxgrid.wxss，两个文件。

主要函数

//初始化表格，设置几行几列init(rowsCount,colsCount)//设置行高（不设置的话，默认40高度）//传人height,index设置第index+1行的高度//只传人height设置所有行的高度setRowsHeight(height,index)//设置列宽（不设置的话，默认等宽）//传人width,index设置第index+1列的宽度“权重”//只传人height设置所有的的宽度“权重”setColsWidth(width,index)//将一维数组转换为二维数组，存储在datawxgrid.data.add(key,arr);
1

使用示例：

简单示例

index.js

var WXGrid = require('../../js/wxgrid.js')var wxgrid = new WXGrid;wxgrid.init(4,4);wxgrid.setRowsHeight(100,2);wxgrid.setColsWidth(100,2);var app = getApp()Page({  data: {    wxgrid  }})
1

index.wxml

<view class="wxgrid">    <view wx:for="{{wxgrid.rows}}" class="wxrow" style="height:{{item.height}}px;line-height:{{item.height}}px;">        <view wx:for="{{wxgrid.cols}}" class="wxcol" style="width:{{item.width}}%">            内容        </view>    </view></view>
1

index.wxss

@import "../../wxss/wxgrid.wxss";
1

效果如下：

数据调用

index.js

var WXGrid = require('../../js/wxgrid.js')var wxgrid = new WXGrid;wxgrid.init(2,3);var classifies = [  {name:"领聘1"},  {name:"领聘2"},  {name:"领聘3"},  {name:"领聘4"},  {name:"领聘5"},  {name:"领聘6"}]wxgrid.data.add("classifies",classifies);   //将一维数组转换为二维数组var app = getApp()Page({  data: {    wxgrid  }})
1

index.wxml

<view class="wxgrid">    <view wx:for="{{wxgrid.rows}}" wx:for-index="i" class="wxrow" style="height:{{item.height}}px;line-height:{{item.height}}px;">        <view wx:for="{{wxgrid.cols}}" wx:for-index="j" class="wxcol" style="width:{{item.width}}%">            {{wxgrid.data.classifies[i][j].name}}        </view>    </view></view>
1

index.wxss

@import "../../wxss/wxgrid.wxss";
1

效果如下：

（美团式）分类视图

index.js

var WXGrid = require('../../js/wxgrid.js')var wxgrid = new WXGrid;wxgrid.init(2,4);var img = "http://pic.qqtn.com/up/2016-9/20169281936395677.png";var classifies = [  {name:"领聘1",img},  {name:"领聘2",img},  {name:"领聘3",img},  {name:"领聘4",img},  {name:"领聘5",img},  {name:"领聘6",img},  {name:"领聘7",img},  {name:"领聘8",img}]wxgrid.data.add("classifies",classifies);var app = getApp()Page({  data: {    wxgrid  }})
1

index.wxml

<view class="wxgrid">    <view wx:for="{{wxgrid.rows}}" wx:for-index="i" class="wxrow">        <view wx:for="{{wxgrid.cols}}" wx:for-index="j" class="wxcol" style="width:{{item.width}}%;">            <a class="wxclassify" href="#">                <image class="wxclassify-img" mode="aspectFit" src="{{wxgrid.data.classifies[i][j].img}}"></image>                {{wxgrid.data.classifies[i][j].name}}            </a>        </view>    </view></view>
1

效果如下

插件代码

https://git.coding.net/duangongbang/wxgrid.git