slider-maxValue.uvue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. <template>
  2. <view class="uni-padding-wrap">
  3. <view class="uni-title">最大值溢出测试(不能滑动到最右侧)</view>
  4. <view>
  5. <slider id="slider" :value="0" :min="0" :max="10.5" :step="1" :show-value="true" @change="valueChange"/>
  6. </view>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. data() {
  12. return {
  13. sliderX: 0,
  14. sliderY: 0,
  15. sliderHeight: 0,
  16. sliderValue: 0
  17. }
  18. },
  19. onReady() {
  20. // #ifdef APP-IOS || APP-HARMONY
  21. const sliderEle = uni.getElementById("slider")
  22. const sliderRect = sliderEle?.getBoundingClientRect()
  23. this.sliderX = sliderRect.x
  24. this.sliderY = sliderRect.y
  25. this.sliderHeight = sliderRect.height
  26. // 加上导航栏及状态栏高度
  27. const systemInfo = uni.getSystemInfoSync()
  28. this.sliderY += systemInfo.safeAreaInsets.top + 44
  29. // #endif
  30. },
  31. methods: {
  32. valueChange(e: UniSliderChangeEvent) {
  33. console.log('valueChange', e.detail.value)
  34. this.sliderValue = e.detail.value
  35. }
  36. }
  37. }
  38. </script>