2 个回答

可以看看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%);
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题