一图胜千言,相信很多开发者都没有绕开过图表制作这个坑,在小程序中也是,当然可以用第三方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
<view class="container">
<view class="view-row" style="color:#aaa;font-size:36rpx;margin:30rpx;border-bottom:1rpx solid #aaa;padding:10rpx">图表系列-表格</view>
<view style="font-size:32rpx;color:#aaa">表格</view>
<scroll-view scroll-x style="width:90%;white-space: nowrap;margin-top:20px;">
<block wx:for="{{contentList}}">
<view class="{{isShowAll?'view-column-all':'view-column'}}" style="">
<block wx:for="{{item}}" wx:for-index="subIndex" wx:for-item="subItem">
<view style="width:100%;background:{{subIndex%2==0?'rgb(206, 236, 255)':'white'}};padding:10px 0;border:1px solid white" bindtap="showAll">
<text class="{{isShowAll?'text-all':'text-shrink'}}" style="width:100%">{{subItem}}</text>
</view>
</block>
</view>
</block>
</scroll-view>
</view>
wxss
.container {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
}
.text-shrink {
font-size: 16px;
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
.text-all {
font-size: 16px;
text-align: center;
}
.view-column{
width:25%;display:inline-block;
}
.view-column-all{
min-width:25%;display:inline-block;
}