微信小程序之图表系列 |
您所在的位置：网站首页 › 简单制作表格图片大全 › 微信小程序之图表系列 |
微信小程序之图表系列
|
一图胜千言，相信很多开发者都没有绕开过图表制作这个坑，在小程序中也是，当然可以用第三方echart等制图插件来做，但小程序要求代码量最大12M，还得分好几个包，一个echart插件就将近1M，要是只做一张表或几张表实在浪费，况且小程序的加载速度与程序包大小也是息息相关的。因此写这系列文章，目的是降低程序包大小，又能实现需要的图表。 先来实现一个最简单的表格制作做过小程序的可能都会用到“小程序数据助手”这款小程序，是官方提供用来查看小程序数据的，其中有这样一个表格如下：
其实就是一个横向的scrollview； 另外还有一个点击效果，点击后表格内容显示全部，再点击则收缩起来，这个控制item的宽度及text样式就好了 代码如下：js Page({ data: { contentList: [["序号", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13], ["姓名", "孙达", "任二", "张三", "李四", "王五", "赵柳", "冯琦", "楚芭", "高酒", "朱诗怡", "罗世尔", "牛食三", "钟世思"], ["姓别", "男", "男", "男", "男", "男", "女", "女", "女", "男", "女", "女", "女", "男"], ["地址", "河北省邯郸市复兴区", "河北省保定市高碑店区", "北京市丰台区", "北京市朝阳区", "山东省日照市", "河北省邯郸市丛台区", "河北省邯郸市复兴区", "河北省邯郸市肥乡区", "河北省邯郸市永年区", "河北省邯郸市广平县", "河北省邯郸市复兴区", "河北省邯郸市鸡泽县", "北京市朝阳区望京soho塔一C座"]], isShowAll:false }, showAll(){ if(this.data.isShowAll){ this.setData({ isShowAll:false }) }else{ this.setData({ isShowAll:true }) } } })wxml 图表系列-表格 表格 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |