微信小程序表格布局怎么弄
微信小程序开发在前端开发最重要的就是布局，布局的编写应该是每个小程序开发者都应该掌握的，接下来小编就为大家带来了微信小程序表格布局的具体流程，一起来看看吧。
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);123456789101112123456789101112
使用示例：
简单示例
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
}
})
123456789101112123456789101112
index.wxml
内容
1234567812345678
index.wxss
@import "../../wxss/wxgrid.wxss";11
效果如下：
数据调用
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
}
})12345678910111213141516171234567891011121314151617
index.wxml
{{wxgrid.data.classifies[i][j].name}}
12345671234567
index.wxss
@import "../../wxss/wxgrid.wxss";11
效果如下：
(美团式)分类视图
index.js
var WXGrid = require('../../js/wxgrid.js')
var wxgrid = new WXGrid;
wxgrid.init(2,4);
var img = "pic.qqtn/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
}
})12345678910111213141516171819201234567891011121314151617181920
index.wxml
{{wxgrid.data.classifies[i][j].name}}
12345678910111234567891011
效果如下
插件代码
git.coding/duangongbang/wxgrid.git
微信小程序表格布局的所有相关资料和具体操作步骤小编都已经介绍得很清楚了，希望大家在看完之后也能够进行相关的开发。想要获取更多相关资料请关注微信小程序素材网。
微信小程序码怎么弄?微信小程序码怎么生成?
微信小程序能做什么?微信小程序有什么作用?
微信小程序返回功能，微信小程序返回功能如何开发?