微信小程序自定义布局插件：wxgrid

• 微信小程序自定义布局插件：wxgrid
• 引言
• 主要函数
• 使用示例：
  • 示例1
  • 示例2
  • 示例3
• 插件代码

引言

微信小程序发布，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)
//将一维数组转换为二维数组，存储在data
wxgrid.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
  }
})

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>

index.wxss

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

效果如下：

示例2

数据调用

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
  }
})

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>

index.wxss

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

效果如下：

示例3

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
  }
})

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>

效果如下

插件代码

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