在微信小程序中如何实现尺子功能?

/ 0评 / 0

这些功能真的是实用价值很低但又必不可少,没办法
来来来看看

我们只要一个单页就行

静态完成
<canvas canvasId="ruler" class="ruler" style="width:{{width}}px;height:{{height}}px"></canvas>
<view class="show">分辨率系数:{{coefficient}}</view>
<slider activeColor="#08e037" bindchange="changeCoefficient" blockColor="#08e037" class="slider" max="70" min="30" value="{{coefficient}}"></slider>
<view bindtap="reset" class="button" hoverClass="button-hover">重置</view>

这就不用js了
最简单
csspage {
padding: 0;
margin: 0;
font-size: 30rpx;
color: #757575;
background-color: #ffffff;
width: 100%;
height: 100%;;
}

.show {
width: 350rpx;
margin: 0 200rpx;
font-size: 40rpx;
position: fixed;
top: 40vh;
left: 0;
z-index: 999;
text-align: center;
color: #08e037;
}

.slider {
width: 350rpx;
margin: 0 200rpx;
position: fixed;
top: 50vh;
left: 0;
z-index: 999;
}

.button {
box-sizing: border-box;
width: 350rpx;
font-size: 30rpx;
margin: 0 200rpx;
position: fixed;
top: 60vh;
left: 0;
z-index: 999;
background-color: #08e037;
border-radius: 80rpx;
text-align: center;
height: 80rpx;
line-height: 80rpx;
color: #ffffff;
}

.button-hover {
background-color: #000000;
color: #ffffff;
}

评论已关闭。