【微信小程序】布局插件:wxgrid
2016-10-05 17:19
429 查看
微信小程序发布,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.jsvar 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.jsvar 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.jsvar 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
相关文章推荐
- 微信小程序】布局插件:wxgrid
- 微信小程序之日期与时间插件
- 微信小程序 Flex布局
- 微信小程序开发:Flex布局
- 微信小程序测试:navigator组件使用flex布局不兼容问题及解决方案
- 微信小程序中布局使用的css布局语法
- WxMasonry微信小程序瀑布流布局模式
- 微信小程序页面布局之弹性布局-Flex介绍
- 微信小程序 view 布局
- 微信小程序前端布局自动生成工具- 玉目智能超速众包开发平台
- 微信小程序之列表布局实现
- sublime福音:微信小程序组件及API补全插件
- 微信小程序输出html内容数据插件wxParse
- 微信小程序开发之toast提示插件使用示例
- 进击的移动端:40G微信小程序开发教程(工具插件+视频教程)
- A00、微信小程序---插件功能简析
- 微信小程序之倒计时插件 wxTimer
- 微信小程序开发之搞懂flex布局5——cross axis
- 微信小程序 Flex布局详解