可以看看vant-weapp、minui,然后改造一下这篇文章也有实现:https://blog.csdn.net/m0_46735106/article/details/122541277<view class="progress-container"> <view class="progress-bar" style="width: {{percent}}%;"></view> <view class="price-bubble" style="left: {{percent}}%;"> <view class="price">{{price}}</view> </view> </view> Component({ properties: { percent: { type: Number, value: 0, observer: 'updateBubblePosition' }, price: { type: String, value: '' } }, data: { bubbleWidth: 0 }, methods: { updateBubblePosition() { const query = this.createSelectorQuery() query.select('.price-bubble').boundingClientRect() query.select('.progress-container').boundingClientRect() query.exec((res) => { const bubbleWidth = res[0].width const containerWidth = res[1].width const left = (containerWidth * this.data.percent) / 100 - bubbleWidth / 2 this.setData({ bubbleWidth: bubbleWidth, bubbleLeft: left }) }) } } }) .progress-container { position: relative; height: 20px; border-radius: 10px; background-color: #ddd; } .progress-bar { position: absolute; top: 0; bottom: 0; border-radius: 10px; background-color: #3f51b5; } .price-bubble { position: absolute; top: -30px; height: 20px; line-height: 20px; border-radius: 10px; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); text-align: center; white-space: nowrap; font-size: 12px; color: #333; } .price-bubble::after { content: ''; position: absolute; bottom: -10px; left: 50%; width: 0; height: 0; border: 5px solid transparent; border-top-color: #fff; transform: translateX(-50%); }
虽然我没有做过微信小程序,但是我觉得你可能要找的是滑动条(range)。比如这些:https://developers.weixin.qq.com/miniprogram/dev/component/sl...http://mint-ui.github.io/docs/#/zh-cn2/rangehttps://vant-contrib.gitee.io/vant-weapp/0.x/#/sliderhttps://taro-docs.jd.com/docs/components/forms/slider
可以看看vant-weapp、minui,然后改造一下
这篇文章也有实现:https://blog.csdn.net/m0_46735106/article/details/122541277