微信小程序发布,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);
使用示例:
简单示例
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";
效果如下:
数据调用
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";
效果如下:
(美团式)分类视图
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