百度了一圈，沒發現有微信小程序的溫度計，都是基于css3和jquery的溫度計，沒辦法，只能自己手動改啦，靜態版代碼如下：

wxml

<view class="contain"><view class="temp"><view id="therm-numbers"><view class="therm-number pos0">75℃</view><view class="therm-number pos1">50℃</view><view class="therm-number pos2">25℃</view><view class="therm-number pos3">0℃</view><view class="therm-number pos4"></view></view><view id="therm-graphics"><image id="therm-top" src="../../img/icons/glassTop2x.png"></image><image id="therm-body-bg" src="../../img/icons/glassBody2x.png"></image><image id="therm-body-mercury" src="../../img/icons/coldVertical2x.png"></image><image id="therm-bottom" src="../../img/icons/coldBottom2x.png"></image><view id="therm-body-fore"><image src="../../img/icons/tickShine.png"></image><image src="../../img/icons/tickShine.png"></image><image src="../../img/icons/tickShine.png"></image><image src="../../img/icons/tickShine.png"></image></view></view><view id="therm-tooltip"><image class="tip-left" src="../../img/icons/tooltipPoint2x.png"></image><image class="tip-right" src="../../img/icons/tooltipButt2x.png"></image><view class="tip-middle"><p>30℃</p></view></view></view> </view>

圖片

wxss

page {margin: 0;padding: 0;color: #fff; } /* 內容框 */ .contain {width: 100%;height: 1200rpx; } /* 溫度 */ .contain .temp {width: 100%;height: 500rpx;padding-left: 250rpx;position: relative;background: linear-gradient(to left, #669, #262a2d); } /* 左側溫度刻度 */ #therm-numbers {width: 100rpx;float: left;opacity: 0.4; } .therm-number {position: absolute;text-align: right;font-size: 26rpx; } .pos0 {position: absolute;top: 24rpx; } .pos1 {position: absolute;top: 104rpx; } .pos2 {position: absolute;top: 184rpx; } .pos3 {position: absolute;top: 264rpx; } .pos4 {position: absolute;top: 344rpx; } /* 溫度計 */ #therm-graphics {float: left;left: 100rpx;width: 92rpx;height:448rpx;margin-top: 20rpx;position:relative;display:flex;flex-direction:column;/* 清除圖片縫隙 */ } /* 圖片頂部 */ #therm-top {position: absolute;top:0;left:15rpx;width:64rpx;height: 26rpx; } /* 圖片中間 */ #therm-body-bg {position: absolute;top:26rpx;left:15rpx;width:64rpx;height: 320rpx; } /* 水銀 */ #therm-body-mercury {position: absolute;left: 28rpx;width: 36rpx;top: 346rpx;height: 0rpx; } /* 溫度計底部 */ #therm-bottom {position: absolute;top:345rpx;left: 0;width: 100%;height: 102rpx; } /* 溫度計刻度 */ #therm-body-fore {position:relative;display:flex;flex-direction:column;/* 清除圖片縫隙 */top: 30rpx;left: 22rpx;height:320rpx;width: 40rpx; } #therm-body-fore image{width: 100%; }/*右側溫度顯示 */#therm-tooltip {position: relative;float:left;left: 76rpx;width: 200rpx; }#therm-tooltip .tip-left {float: left;width: 38rpx;height: 64rpx; }#therm-tooltip .tip-middle {float: left;height: 64rpx;font-size: 30rpx; }#therm-tooltip .tip-middle p {position: relative;margin: 0;padding-right: 8rpx;padding-left: 6rpx;top: 12rpx;height: 64rpx;opacity: 0.7;background-size: 128rpx 128rpx; }#therm-tooltip .tip-right {float: left;width: 18rpx;height: 64rpx; }/* 清除浮動流 */.clear {clear: both; }/* 溫度動態填充顯示 */#therm-body-mercury {height: 0rpx;animation: myHeight 5s;animation-fill-mode: forwards; }/* 溫度計刻度動態展示 */#therm-tooltip {top: 320rpx;animation: myTop 5s;animation-fill-mode: forwards; }@keyframes myHeight {from {height: 0px;top: 346rpx;/* 離頂：26+320=346rpx; */}to {height: 171.8rpx;/*一大格25度80rpx，一度3.2rpx，30度96rpx，-24到0度76.8rpx，顯示30度即高為171.8rpx*/top: 174.2rpx;/* 346-171.8=174.2rpx*/} }@keyframes myTop {from {top: 346rpx;}to {top: 170rpx;} }

效果圖

總結

以上是生活随笔為你收集整理的微信小程序之温度计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。