94 lines
3.0 KiB
XML
94 lines
3.0 KiB
XML
<import-sjs
|
|
from="./index.sjs"
|
|
name="sliderSjs"
|
|
></import-sjs>
|
|
<template name="slider-handler">
|
|
<view
|
|
class="ant-slider-handler"
|
|
style="left: {{position}}%"
|
|
>
|
|
<popover
|
|
placement="top"
|
|
visible="{{showTooltip}}"
|
|
showMask="{{false}}"
|
|
>
|
|
<slot name="slider">
|
|
<view class="ant-slider-handler-block">
|
|
<view class="ant-slider-handler-icon-default">
|
|
<view class="ant-slider-handler-icon-default-line1"></view>
|
|
<view class="ant-slider-handler-icon-default-line2"></view>
|
|
<view class="ant-slider-handler-icon-default-line3"></view>
|
|
</view>
|
|
</view>
|
|
</slot>
|
|
<view
|
|
slot="content"
|
|
class="ant-slider-tooltip-content"
|
|
>
|
|
<slot
|
|
name="tooltip"
|
|
value="{{value}}"
|
|
>
|
|
{{value}}
|
|
</slot>
|
|
</view>
|
|
</popover>
|
|
</view>
|
|
</template>
|
|
<view
|
|
class="ant-slider {{className ? className : ''}}"
|
|
style="opacity: {{disabled ? '0.4' : '1'}};"
|
|
>
|
|
<view class="ant-slider-track {{showNumber ? 'ant-slider-track-number' : ''}}">
|
|
<view
|
|
class="ant-slider-track-touch-area"
|
|
id="ant-slider-id-{{$id || ''}}"
|
|
onTouchStart="handleTrackTouchStart"
|
|
onTouchEnd="handleTrackTouchEnd"
|
|
onTouchMove="handleTrackTouchMove"
|
|
>
|
|
<view class="ant-slider-track-fill">
|
|
<view class="ant-slider-track-fill-background"></view>
|
|
<view
|
|
class="ant-slider-track-fill-front {{activeLineClassName || ''}}"
|
|
style="width: {{sliderWidth}}%; left: {{sliderLeft}}%; {{activeLineStyle || ''}}"
|
|
></view>
|
|
<view class="ant-slider-showTicks">
|
|
<block
|
|
a:for="{{tickList}}"
|
|
a:for-index="index"
|
|
a:for-item="item"
|
|
>
|
|
<view
|
|
class="ant-slider-tick ant-slider-tick-{{sliderSjs.isFrontTick(item, sliderLeft, sliderWidth) ? 'front' : 'back'}} {{sliderSjs.isFrontTick(item, sliderLeft, sliderWidth) && activeDotClassName ? activeDotClassName : ''}}"
|
|
style="left: {{item.left}}%;{{sliderSjs.isFrontTick(item, sliderLeft, sliderWidth) && activeDotStyle ? activeDotStyle : ''}}"
|
|
>
|
|
<view
|
|
a:if="{{showNumber}}"
|
|
class="ant-slider-tick-number"
|
|
>
|
|
<slot
|
|
name="tick"
|
|
value="{{item.value}}"
|
|
>
|
|
{{item.value}}
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
<block a:if="{{range}}">
|
|
<template
|
|
is="slider-handler"
|
|
data="{{ position: sliderLeft, icon: icon, value: mixin.value[0], showTooltip: changingStart && showTooltip }}"
|
|
></template>
|
|
</block>
|
|
<template
|
|
is="slider-handler"
|
|
data="{{ position: sliderLeft + sliderWidth, icon: icon, value: range ? mixin.value[1] : mixin.value, showTooltip: changingEnd && showTooltip }}"
|
|
></template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view></view>
|
|
</view> |