最近在学习小程序开发,自己手敲的代码,和教程代码一样(通过工具逐行比对了代码,确保没有敲错代码),是运行效果不一样,不知道问题出在哪里了?恳请大神赐教
我敲的代码:
<!--index.wxml-->
<view class="box">
<view class='title'>基本绘图</view>
<view>
<canvas canvas-id="myCanvas" ></canvas>
</view>
<view class='btnLayout'>
<button type='primary' bindtap="clear">清除</button>
<button type='primary' bindtap="drawDot">画点</button>
<button type='primary' bindtap="drawCircle">画圆</button>
</view>
<view class='btnLayout'>
<button type='primary' bindtap="drawDash">画虚线</button>
<button type='primary' bindtap="capAndJoin">端点交点</button>
<button type='primary' bindtap="drawText">画字</button>
</view>
<view class='btnLayout'>
<button type='primary' bindtap="circularGrad">圆形渐变</button>
<button type='primary' bindtap="shadowRect">阴影矩形</button>
<button type='primary' bindtap="translucent">半透明</button>
</view>
</view>
/**index.wxss**/
canvas {
width: 100%;
height: 340px;
background-color: cornflowerblue;
}
button {
width: 100px;
}
.btnLayout {
display: flex;
flex-direction: row;
margin: 10px;
justify-content: space-around;
}
教材附带的代码:
<!--pages/API/Drawing/index.wxml-->
<view class="box">
<view class='title'>基本绘图</view>
<view>
<canvas canvas-id="myCanvas" ></canvas>
</view>
<view class='btnLayout'>
<button type='primary' bindtap="clear">清除</button>
<button type='primary' bindtap="drawDot">画点</button>
<button type='primary' bindtap="drawCircle">画圆</button>
</view>
<view class='btnLayout'>
<button type='primary' bindtap="drawDash">画虚线</button>
<button type='primary' bindtap="capAndJoin">端点交点</button>
<button type='primary' bindtap="drawText">画字</button>
</view>
<view class='btnLayout'>
<button type='primary' bindtap="circularGrad">圆形渐变</button>
<button type='primary' bindtap="shadowRect">阴影矩形</button>
<button type='primary' bindtap="translucent">半透明</button>
</view>
</view>
/* pages/API/Drawing/index.wxss */
canvas {
width: 100%;
height: 340px;
background-color: cornflowerblue;
}
button {
width: 100px;
}
.btnLayout {
display: flex;
flex-direction: row;
margin: 10px;
justify-content: space-around; /* 弹性项目沿主轴方向平均分布,两边留有一半的间隔空间。 */
}
因为你的宽度被覆盖了,这样写
button {
width: 100px!important;
}
你看看他的显示器是不是和你比例不一样 你的应该比她的小
<button type='primary' bindtap="drawDot" style="margin-left:10px;">画点</button>
你审查下元素可以发现是margin:0px,或者是padding:0px 你把他的边距改一下就可以了。
看下宽度 width?