8***@qq.com
8***@qq.com
  • 发布:2022-09-06 09:16
  • 更新:2022-12-05 14:41
  • 阅读:328

【报Bug】slider组件 真机运行 step没效果 而且会有很多小数点

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win7

HBuilderX类型: 正式

HBuilderX版本号: 3.5.3

手机系统: Android

手机系统版本号: Android 7.1.1

手机厂商: vivo

手机机型: vivox9

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
  <view>  
      <view class="map">  
        <map id="map" ref="map" style="width: 750rpx;height: 500rpx;" :scale="14" :latitude="latitude" :longitude="longitude" :show-location="true" :circles="circleComputed" enable-rotate enable-overlooking enable-poi></map>  
      </view>  
      <view class="map-down-box">  
            <uni-section title="查询位置" titleFontSize="15px">  
              <view class="fake-seat" @click="searchSeat">  
                <uni-icons type="search" color="gray"></uni-icons>  
                <text style="font-size:13px;color:gray;margin-left:5px">搜索位置</text>  
              </view>  
            </uni-section>  
            <uni-section title="分析范围(m)" titleFontSize="15px">  
              <slider :value="mapRadius" @change="sliderChange"  :min="500" :max="5000" :step="500" show-value/>  
            </uni-section>  
      </view>  
  </view>  
</template>  

<script setup lang="ts">  
    import {ref, reactive, getCurrentInstance, computed} from 'vue'  
    import { onReady } from '@dcloudio/uni-app'  
    const latitude = ref(31.301508)  
    const longitude = ref(121.521276)  
    const mapContext = ref()  
    const mapRadius = ref(500)  

    interface circlesParam {  
        latitude: number,  
        longitude: number,  
        color: string,  
        fillColor: string,   
        radius: number  
    }  
    const circlesList = reactive<circlesParam[]>([])  

  // 用于监测circle变化 触发地图圆圈显示  
  const circleComputed = computed(() => {  
    return circlesList.slice(0)  
  })  

    onReady(()=>{  
         mapContext.value = uni.createMapContext("map", getCurrentInstance())  
        //  获取定位 h5需要 https  app需要申请配置高德key  
        uni.getLocation({  
            type: 'gcj02', //返回可以用于uni.openLocation的经纬度  
            success: function (res) {  
                latitude.value = res.latitude;  
                longitude.value = res.longitude;  
                changeLocation()  
            }  
        })  

        // 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})    
        mapContext.value.initMarkerCluster({    
            enableDefaultStyle: false,    
            zoomOnClick: true,    
            gridSize: 60  
        })   

    })  

// 搜索位置  

const searchSeat = ()=>{  
  console.log('1111111111111111')  
  uni.chooseLocation({  
      success: (res) => {  
          console.log('搜索地址经度:' + res.longitude)  
          console.log('搜索地址纬度:' + res.latitude)  
          console.log('搜索地址:' + res.address)  
          latitude.value = res.latitude  
          longitude.value = res.longitude  
          changeLocation()  
      }  
  })  
}  

const changeLocation = () =>{  
  mapContext.value.moveToLocation({  
    latitude: latitude.value,  
    longitude: longitude.value  
  })  
  circlesList[0] = {  
    latitude:  latitude.value,  
    longitude: longitude.value,  
    color: '#AACAF6AA', // 描边颜色  
    fillColor: '#AACAF6AA', //填充颜色  
    radius: mapRadius.value, //半径  
  }  
}  

</script>  

<style scoped>  
  .fake-seat{  
    background: #f5f5f5;  
    border-radius: 15rpx;  
    margin: 0 30rpx;  
    padding: 20rpx;  
    flex-direction: row;  
    align-items: center;  
  }  
</style>  

操作步骤:
 <slider :value="mapRadius" @change="sliderChange"  :min="500" :max="5000" :step="500" show-value/>

预期结果:

正常组件效果

实际结果:

step无效果 showvalue非正常整数值

bug描述:

slider组件 真机运行 step没效果 而且会有很多小数点

2022-09-06 09:16 负责人:DCloud_uniAD_HDX 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

问题复现,已转给相关人员排查,已加分感谢反馈!

DCloud_UNI_Anne

DCloud_UNI_Anne

HBuilderX3.6.11-alpha已修复

要回复问题请先登录注册