请问这个微信小程序 这种进度条 怎么做呢？有个菜单，下面有个当前价跟随走动，或者哪个小程序ui框架能做呢？

• Z时代
• 2024-02-04
• 分类：IT

回答：

可以看看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/range
• https://vant-contrib.gitee.io/vant-weapp/0.x/#/slider
• https://taro-docs.jd.com/docs/components/forms/slider

以上是 请问这个微信小程序 这种进度条 怎么做呢？有个菜单，下面有个当前价跟随走动，或者哪个小程序ui框架能做呢？ 的全部内容， 来源链接： utcz.com/p/934178.html