小程序模板網

微信小程序 canvas區(qū)間滑動選取

發(fā)布時間:2018-09-03 08:52 所屬欄目:小程序開發(fā)教程

目標js文件使用 import 引入; 然后在onLoad(){}里面要一下寫入例如: this.selectInterval = new selectInterval({屬性});

 

  1. this.selectInterval = new SelectInterval({
    
    canvasId:'canvas', 值必須是canvas組件的canvas-id屬性的值
    
    canvasHeight:100, 值必須是當前畫布的高度
    
    Xaxis:{left:30,right:345}, { left:30, 橫條的左端 right:345, 橫條的右端 }(right必須大于left,如果不傳有默認值)
    
    scale:[10,20,30], 刻度值Array類型,取值以一個不變數為常量不斷遞增,數組任何兩個前后值相減要恒等于這個常量,如果數組第一個值不是0, 會默認在數組前面添加一個0,但是0這個值不會在canvas上顯示,(當數組長度是2的時候,
    可以設置任意大于零的數值,但第二個值必須大于第一個值);
    
    Yaxis:[125,5], 刻度值Array類型,第一個值是繪制的橫條的起始高度,第二個值是橫條本身的高度(如果不傳默認[125,5])
    manner:true, 切換選擇滑動點的上方在滑動的時候是否有跟隨圓球,如果值為false那么明確顯示區(qū)間滑動所得的最小值與最大值
    bothEndsNear:310, 可以設置刻度值和尺度點距離橫條的開頭與終點的距離,不傳默認居中
    
    // decimalPoint:10, 刻度值/decimalPoint,可以使刻度值變小數,必須是10的倍數,可以不傳
    
    // rightSliderStop:2, 值為一個Boolean或者在manner的值為true的時候可填number,可以不傳;而number的值就是最大值與最小值的差,設置后兩個滑動點是不會滑動到小于這個number的距離
    
    showTitle:{
    name:'km', String類型,用作設置單位
    size:15, 標簽字體大小,Number類型
    title:'#1384e0', 頭部標簽的字體顏色或者圓球里面的字體顏色,String類型
    positionX:100, 標簽字體在canvas橫向的位置,Number類型,只有manner為false或者不傳的時候生效
    positionY:80, 標簽字體或者圓球在canvas縱向的位置,Number類型
    isfollow:{ 跟隨圓球大小與顏色的設置,manner的值為false或不傳的時候,這個屬性可以不給
    view:true, manner的值為true時,view的值必須為true
    roundSize:12, 圓球大小
    roundColor:'rgba(10, 113, 238, 0.8)' 圓球的顏色
    }
    },(如果不傳不會顯示頭部標簽)
    
    scaleIn:{
    name:'km', String類型,用作設置單位
    size:10, 控制刻度值字體的大小,Number類型
    valueY:108, 刻度值在canvas縱坐標的位置,Number類型
    pointY:113 尺度點在canvas縱坐標的位置,Number類型
    },(如果不傳不會顯示刻度值)
    
    colour:{
    colorBar:['#e5e5e5','#1384e0'], 橫條的顏色,Array類型,第一個是橫條的底色,第二個是取值范圍的顏色
    roundColor:['#ffffff','#e5e5e5'], 圓圈顏色,Array類型,第一個是圓的顏色,第二個是圓的邊框顏色
    scale:['#000000','#999999'] 刻度數值的字體顏色
    },(如果不傳會顯示上面的默認參數)
    
    selectedInterval:{
    min:15,
    max:23
    },(min不能大區(qū)等于max,如果不傳只會顯示在橫條的兩端)
    
    round:{
    radius:10,
    edgeLine:2
    },(如果不傳會默認圓的半徑為10,邊框為2)
    
    // image:{
    // url:'../../assets/image/spot-a.png', 圖片的本地路徑值為String類型;值可以為數組,但是如果是數組時數組的長度必須是2
    // width:20, 設置圖片的寬度
    // height:24 設置圖片的高度
    // },(如果不傳不會顯示圖片)
    
    followValue:{
    name:'', String類型,用作設置單位
    color:'#f8835f',
    size:10, 設置字體大小
    leftY:151, 隨數值在canvas縱向的位置
    rightY:151
    }(如果不傳不會顯示跟隨數值)
    });
    /**Page({})里面創(chuàng)建如下屬性 必須
    
    
    自定義(e){ bindtouchstart
    this.selectInterval.move(e.changedTouches[0].x,e.changedTouches[0].y);
    },
    
    自定義(e){ bindtouchmove
    this.selectInterval.meter(e.changedTouches[0].x);
    },
    
    自定義(e){ bindtouchend
    this.selectInterval.texthints((min,max)=>{
    參數min/max返回的值是最小/大價格,超過最大值max返回null
    console.log(min,max);
    },true);初始化時傳入manner屬性的值為true時候,這個函數的第二個參數的true就要傳,不傳也沒什么問題,只是結果會有不同;
    },
    
    <canvas canvas-id="canvas" bindtouchstart="自定義" bindtouchmove="自定義" bindtouchend="自定義"></canvas>
    畫布css樣式width:100%;box-sizing: border-box;height: 自定義rpx;


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24761.html 復制鏈接 如需定制請聯系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢