从截图可以看出，同一代码在Android上页面不会scroll，canvas被下面的view挤压高度变化；而IOS上canvas仍保持设置的高度，页面会自动scroll
另外，不知道为何Android手机在(0,0)位置画Rect会上移？
测试手机
iphone SE: IOS 10.3.3
小米Note: Android 6.0.1
<!–test.wxml–>
<view class=“graph-view”>
<view class=“title”/>
<canvas canvas-id=“myCanvas” class=“my-canvas”/>
<view class=“table”>
<view class=“total-view”>
合计: {{totalAmount}}
</view>
<view wx:for="{{series}}" wx:key=“category”>
<view class=“tr left” wx:if="{{index % 2 == 0}}">
<view class=“td”>{{item.name}}</view>
<view class=“td”>{{item.data}}</view>
</view>
<view class=“tr right” wx:else>
<view class=“td”>{{item.name}}</view>
<view class=“td”>{{item.data}}</view>
</view>
</view>
</view>
</view>
/* test.wxss */
.graph-view {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 0px 0px;
}
.title {
width: 100%;
height: 50px;
background-color: greenyellow
}
.my-canvas {
width: 100%;
height: 300px;
padding: 0px;
background-color: yellow
}
.table {
width: 100%;
border: 0px solid darkgray;
background-color: #7d9da9;
}
.total-view {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
background-color: #74b0c7;
color: #fff;
padding: 8px 0px;
}
.tr {
display: flex;
width: 49%;
justify-content: center;
color: #fff;
align-items: center;
padding: 10rpx 0rpx;
border-bottom: 1px solid darkgray;
}
.left {
float: left;
border-right: 1px solid darkgray;
}
.right {
float: right;
}
.td {
width: 50%;
justify-content: center;
text-align: center;
}
// test.js
Page({
/**
* 页面的初始数据
*/
data: {
series: [
{ name: ‘类别1’, data: 100 },
{ name: ‘类别2’, data: 100 },
{ name: ‘类别3’, data: 100 },
{ name: ‘类别4’, data: 100 },
{ name: ‘类别5’, data: 100 },
{ name: ‘类别6’, data: 100 },
{ name: ‘类别7’, data: 100 },
{ name: ‘类别8’, data: 100 },
{ name: ‘类别9’, data: 100 },
{ name: ‘类别10’, data: 100 },
{ name: ‘类别11’, data: 100 },
{ name: ‘类别12’, data: 100 },
{ name: ‘类别13’, data: 100 },
{ name: ‘类别14’, data: 100 },
],
totalAmount: 1400,
},
/**
* 生命周期函数–监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数–监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数–监听页面显示
*/
onShow: function () {
var context = wx.createContext();
context.setFillStyle("#99d9ea")
//x, y, widht, height
context.rect(0, 0, 100, 100);
context.fill();
wx.drawCanvas({
canvasId: ‘myCanvas’,
actions: context.getActions(),
})
},
/**
* 生命周期函数–监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数–监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数–监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
强力驱动