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

作者站长头像
站长
· 阅读数 10

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

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