1个回答
test
2024-07-04
可以看看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%);
}
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容