yuantao/template-MP-ts
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Initial commit

Browse Source
This commit is contained in:
yuantao
2025-09-29 14:05:25 +08:00
commit 6f0bb2f949
579 changed files with 99061 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
uview-plus/components/u-slider/mpother.js Normal file
View File

@@ -0,0 +1,113 @@
/**
* 使用普通的js方案实现slider
*/
export default {
watch: {
value(n) {
// 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
if (this.status === 'end') {
this.updateSliderPlacement(n, true)
}
}
},
mounted() {
this.init()
},
methods: {
init() {
this.getSliderRect()
},
// 获取slider尺寸
getSliderRect() {
// 获取滑块条的尺寸信息
setTimeout(() => {
this.$uGetRect('.u-slider').then((rect) => {
this.sliderRect = rect
this.updateSliderPlacement(this.value, true)
})
}, 10)
},
// 是否可以操作
canNotDo() {
return this.disabled
},
// 获取当前手势点的X轴位移值
getTouchX(e) {
return e.touches[0].clientX
},
formatStep(value) {
// 移动点占总长度的百分比
return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
},
// 发出事件
emitEvent(event, value) {
this.$emit(event, value || this.value)
},
// 标记当前手势的状态
setTouchStatus(status) {
this.status = status
},
onTouchStart(e) {
if (this.canNotDo()) {
return
}
// 标示当前的状态为开始触摸滑动
this.emitEvent('start')
this.setTouchStatus('start')
},
onTouchMove(e) {
if (this.canNotDo()) {
return
}
// 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
const x = this.getTouchX(e)
const { left, width } = this.sliderRect
const distanceX = x - left
// 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
const percent = (distanceX / width) * 100
this.setTouchStatus('moving')
this.updateSliderPlacement(percent, true, 'moving')
},
onTouchEnd() {
if (this.canNotDo()) {
return
}
this.emitEvent('end')
this.setTouchStatus('end')
},
// 设置滑点的位置
updateSliderPlacement(value, drag, event) {
// 去掉小数部分，同时也是对step步进的处理
const { width } = this.sliderRect
const percent = this.formatStep(value)
// 设置移动的值
const barStyle = {
width: `${percent / 100 * width}px`
}
// 移动期间无需过渡动画
if (drag === true) {
barStyle.transition = 'none'
} else {
// 非移动期间，删掉对过渡为空的声明，让css中的声明起效
delete barStyle.transition
}
// 修改value值
this.$emit('input', percent)
// 事件的名称
if (event) {
this.emitEvent(event, percent)
}
this.barStyle = barStyle
},
onClick(e) {
if (this.canNotDo()) {
return
}
// 直接点击滑块的情况，计算方式与onTouchMove方法相同
const { left, width } = this.sliderRect
const value = ((e.detail.x - left) / width) * 100
this.updateSliderPlacement(value, false, 'click')
}
}
}

43
uview-plus/components/u-slider/mpwxs.js Normal file
View File

@@ -0,0 +1,43 @@
import { sleep } from '../../libs/function/index';
export default {
data() {
return {
sliderRect: {},
info: {
width: null,
left: null,
step: this.step,
disabled: this.disabled,
min: this.min,
max: this.max,
value: this.value
}
}
},
mounted() {
this.init()
},
methods: {
init() {
this.getSliderRect()
},
// 获取slider尺寸
getSliderRect() {
// 获取滑块条的尺寸信息
sleep().then(() => {
this.$uGetRect('.u-slider').then((rect) => {
this.info.width = rect.width
this.info.left = rect.left
})
})
},
// 此方法由wxs调用，用于修改v-model绑定的值
updateValue(value) {
this.$emit('input', value)
},
// 此方法由wxs调用，发出事件
emitEvent(e) {
this.$emit(e.event, e.value ? e.value : this.value)
}
}
}

121
uview-plus/components/u-slider/mpwxs.wxs Normal file
View File

@@ -0,0 +1,121 @@
/**
* 使用wxs方案实现slider
* 兼容微信，QQ，H5，Vue版的安卓和iOS
*/
/**
* 开始滑动操作
* @param {Object} e
* @param {Object} ownerInstance
*/
function onTouchMove(e, ownerInstance) {
// wxs事件对象下有一个instance属性，表示当前触发此事件的组件的实例，通过该实例，可以获取相关的dataset，设置样式等信息
// https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html
var instance = e.instance;
// getState()为一个对象，挂载在instance上，类似组件的data一样，可以存放一些变量，供以后的触发事件中使用
var state = instance.getState()
// 滑块组件的整体尺寸信息
var mp = state.mp
if(mp.disabled) {
return
}
var distanceX = getTouchX(e) - mp.left
// 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，step大于1时，不能用此更新视图
var percent = (distanceX / mp.width) * 100
updateSliderPlacement(instance, ownerInstance, percent, 'moving')
// 阻止页面滚动，可以保证在滑动过程中，不让页面可以上下滚动，造成不好的体验
e.stopPropagation && e.stopPropagation()
e.preventDefault && e.preventDefault()
}
function onClick(e, ownerInstance) {
var instance = e.instance
var state = instance.getState()
var mp = state.mp
if(mp.disabled) {
return
}
// 直接点击滑块的情况，计算方式与onTouchMove方法相同
var value = ((e.detail.x - mp.left) / mp.width) * 100
updateSliderPlacement(instance, ownerInstance, value, 'click')
}
function sizeReady(newValue, oldValue, ownerInstance, instance) {
// 页面初始化时候，也会触发此方法，传递的值为空，这里不执行往后的逻辑
if(!newValue || newValue.disabled) {
return
}
var state = instance.getState()
state.mp = newValue
updateSliderPlacement(instance, ownerInstance, newValue.value)
}
// 设置滑点的位置
function updateSliderPlacement(instance, ownerInstance, value, event) {
var state = instance.getState()
var mp = state.mp
if(mp.disabled) {
return
}
var percent = 0
if (mp.step > 1) {
// 如果step步进大于1，需要跳步，所以需要使用Math.round进行取整
percent = Math.round(Math.max(mp.min, Math.min(value, mp.max)) / mp.step) * mp.step
} else {
// 当step=1时，无需跳步，充分利用wxs性能，滑块实时跟随手势，达到丝滑的效果
percent = Math.max(mp.min, Math.min(value, mp.max))
}
// 返回组件的实例
var gapInstance = ownerInstance.selectComponent('.u-slider__gap')
// 在移动期间，不允许transition动画，否则会造成卡顿
gapInstance[event === 'click' ? 'addClass' : 'removeClass']('u-slider__gap--ani')
// 调用逻辑层的方法，修改v-model绑定的值
ownerInstance.callMethod('updateValue', Math.round(percent))
if(event) {
ownerInstance.callMethod('emitEvent', {
event: event,
value: Math.round(percent)
})
}
// 设置移动的值
gapInstance.requestAnimationFrame(function() {
gapInstance.setStyle({
width: percent / 100 * mp.width + 'px',
})
})
}
// 开始滑动
function onTouchStart(e, ownerInstance) {
ownerInstance.callMethod('emitEvent', {
event: 'start',
value: null
})
}
// 停止滑动
function onTouchEnd(e, ownerInstance) {
ownerInstance.callMethod('emitEvent', {
event: 'end',
value: null
})
}
// 获取当前手势点的X轴位移值
function getTouchX(e) {
return e.touches[0].clientX
}
module.exports = {
onTouchStart: onTouchStart,
onTouchMove: onTouchMove,
onTouchEnd: onTouchEnd,
sizeReady: sizeReady,
onClick: onClick
}

193
uview-plus/components/u-slider/nvue.js Normal file
View File

@@ -0,0 +1,193 @@
/**
* 使用bindingx方案实现slider
* 只能使用于nvue下
*/
// 引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损
const BindingX = uni.requireNativePlugin('bindingx')
// nvue操作dom的库，用于获取dom的尺寸信息
const dom = uni.requireNativePlugin('dom')
// nvue中用于操作元素动画的库，类似于uni.animation，只不过uni.animation不能用于nvue
const animation = uni.requireNativePlugin('animation')
import { range } from '../../libs/function/index';
export default {
data() {
return {
// 位移的偏移量
x: 0,
// 是否正在触摸过程中，用于标记动画类是否添加或移除
touching: false,
changeFromInside: false
}
},
watch: {
// 监听vlaue的变化，此变化可能是由于内部修改v-model的值，或者外部
// 从服务端获取一个值后，赋值给slider的v-model而导致的
value(n) {
if (!this.changeFromInside) {
this.initX()
} else {
this.changeFromInside = false
}
}
},
mounted() {
this.init()
},
methods: {
init() {
// 更新滑块尺寸信息
this.getSliderRect().then((size) => {
this.sliderRect = size
this.initX()
})
},
// 获取节点信息
// 获取slider尺寸
getSliderRect() {
// 获取滑块条的尺寸信息
// 通过nvue的dom模块，查询节点信息
return new Promise((resolve) => {
this.$nextTick(() => {
dom.getComponentRect(this.$refs.slider, (res) => {
resolve(res.size)
})
})
})
},
// 初始化按钮位置
initButtonStyle({
barStyle,
buttonWrapperStyle
}) {
this.barStyle = barStyle
this.buttonWrapperStyle = buttonWrapperStyle
},
emitEvent(event, value) {
this.$emit(event, value || this.value)
},
// 滑动开始
async onTouchStart(e) {
// if (this.disabled) return
// // 阻止页面滚动，可以保证在滑动过程中，不让页面可以上下滚动，造成不好的体验
// e.stopPropagation && e.stopPropagation()
// e.preventDefault && e.preventDefault()
// // 更新滑块的尺寸信息
// this.sliderRect = await this.getSliderRect()
// // 标记滑动过程中触摸点的信息
// this.touchStart(e)
// this.startValue = this.format(this.value)
// this.dragStatus = 'start'
// 标记滑动过程中触摸点的信息
// this.touchStart(e)
},
// 开始滑动
onTouchMove(e) {
// if (this.disabled) return;
// if (this.dragStatus === 'start') {
// this.$emit('drag-start')
// }
// // 标记当前滑动过程中的触点信息，此方法在touch mixin中
// this.touchMove(e)
// this.dragStatus = 'draging'
// const {
// width: sliderWidth
// } = this.sliderRect
// const diff = (this.deltaX / sliderWidth) * this.getRange()
// this.newValue = this.startValue + diff
// this.updateValue(this.newValue, false, true)
// 获取元素ref
// const button = this.$refs['nvue-button'].ref
// const gap = this.$refs['nvue-gap'].ref
// animation.transition(gap, {
// styles: {
// width: `${this.startX + this.deltaX}px`
// }
// })
// // console.log(this.startX + this.deltaX);
// animation.transition(button, {
// styles: {
// transform: `translateX(${this.startX + this.deltaX}px)`
// }
// })
// this.barStyle = {
// width: `${this.startX + this.deltaX}px`
// }
const {
x
} = this.getTouchPoint(e)
this.buttonWrapperStyle = {
transform: `translateX(${x}px)`
}
// this.buttonWrapperStyle = {
// transform: `translateX(${this.format(this.startX + this.deltaX)}px)`
// }
},
// onTouchEnd() {
// if (this.disabled) return;
// if (this.dragStatus === 'draging') {
// this.updateValue(this.newValue, true)
// this.$emit('drag-end');
// }
// },
updateValue(value, end, drag) {
value = this.format(value)
const {
width: sliderWidth
} = this.sliderRect
const width = `${((value - this.min) * sliderWidth) / this.getRange()}`
this.value = value
this.barStyle = {
width: `${width}px`
}
// console.log('width', width);
if (drag) {
this.$emit('drag', {
value
})
}
if (end) {
this.$emit('change', value)
}
if ((drag || end)) {
this.changeFromInside = true
this.$emit('update', value)
}
},
// 从value的变化，倒推得出x的值该为多少
initX() {
const {
left,
width
} = this.sliderRect
// 得出x的初始偏移值，之所以需要这么做，是因为在bindingX中，触摸滑动时，只能的值本次移动的偏移值
// 而无法的值准确的前后移动的两个点的坐标值，weex纯粹为阿里巴巴的KPI(部门业绩考核)产物，也就这样了
this.x = this.value / 100 * width
// 设置移动的值
const barStyle = {
width: `${this.x}px`
}
// 按钮的初始值
const buttonWrapperStyle = {
transform: `translateX(${this.x - this.blockHeight / 2}px)`
}
this.initButtonStyle({
barStyle,
buttonWrapperStyle
})
},
// 移动点占总长度的百分比，此处需要先除以step，是为了保证step大于1时，比如10，那么在滑动11,12px这样的
// 距离时，实际上滑块是不会滑动的，到了16,17px，经过四舍五入后，就变成了20px，进行了下一个跳变
format(value) {
return Math.round(range(this.min, this.max, value) / this.step) * this.step
},
getRange() {
const {
max,
min
} = this
return max - min
}
}
}

91
uview-plus/components/u-slider/props.js Normal file
View File

@@ -0,0 +1,91 @@
import { defineMixin } from '../../libs/vue'
import defProps from '../../libs/config/props.js'
export const props = defineMixin({
props: {
// 最小可选值
min: {
type: [Number, String],
default: () => defProps.slider.min
},
// 最大可选值
max: {
type: [Number, String],
default: () => defProps.slider.max
},
// 步长，取值必须大于 0，并且可被(max - min)整除
step: {
type: [Number, String],
default: () => defProps.slider.step
},
// #ifdef VUE3
// 当前取值
modelValue: {
type: [String, Number],
default: () => defProps.slider.value
},
// #endif
// #ifdef VUE2
// 当前取值
value: {
type: [String, Number],
default: () => defProps.slider.value
},
// #endif
// 是否区间模式
isRange: {
type: Boolean,
default: false
},
// 双滑块时值
rangeValue: {
type: [Array],
default: [0, 0]
},
// 滑块右侧已选择部分的背景色
activeColor: {
type: String,
default: () => defProps.slider.activeColor
},
// 滑块左侧未选择部分的背景色
inactiveColor: {
type: String,
default: () => defProps.slider.inactiveColor
},
// 滑块的大小，取值范围为 12 - 28
blockSize: {
type: [Number, String],
default: () => defProps.slider.blockSize
},
// 滑块的颜色
blockColor: {
type: String,
default: () => defProps.slider.blockColor
},
// 用户对滑块的自定义颜色
blockStyle: {
type: Object,
default: () => defProps.slider.blockStyle
},
// 禁用状态
disabled: {
type: Boolean,
default: () => defProps.slider.disabled
},
// 是否显示当前的选择值
showValue: {
type: Boolean,
default: () => defProps.slider.showValue
},
// 是否渲染uni-app框架内置组件
useNative: {
type: Boolean,
default: () => defProps.slider.useNative
},
// 滑块高度
height: {
type: String,
default: () => defProps.slider.height
}
}
})

27
uview-plus/components/u-slider/slider.js Normal file
View File

@@ -0,0 +1,27 @@
/*
* @Author : LQ
* @Description :
* @version : 1.0
* @Date : 2021-08-20 16:44:21
* @LastAuthor : LQ
* @lastTime : 2021-08-20 17:08:25
* @FilePath : /u-view2.0/uview-ui/libs/config/props/slider.js
*/
export default {
// slider组件
slider: {
value: 0,
blockSize: 18,
min: 0,
max: 100,
step: 1,
activeColor: '#2979ff',
inactiveColor: '#c0c4cc',
blockColor: '#ffffff',
showValue: false,
disabled:false,
blockStyle: {},
useNative: false,
height: '2px'
}
}

500
uview-plus/components/u-slider/u-slider.vue Normal file
View File

@@ -0,0 +1,500 @@
<template>
<view
class="u-slider"
:style="[addStyle(customStyle)]"
>
<template v-if="!useNative || isRange">
<view ref="u-slider-inner" class="u-slider-inner" @click="onClick"
@onTouchStart="onTouchStart2($event, 1)" @touchmove="onTouchMove2($event, 1)"
@touchend="onTouchEnd2($event, 1)" @touchcancel="onTouchEnd2($event, 1)"
:class="[disabled ? 'u-slider--disabled' : '']" :style="{
height: (isRange && showValue) ? (getPx(blockSize) + 24) + 'px' : (getPx(blockSize)) + 'px',
}"
>
<view ref="u-slider__base"
class="u-slider__base"
:style="[
{
height: height,
backgroundColor: inactiveColor
}
]"
>
</view>
<view
@click="onClick"
class="u-slider__gap"
:style="[
barStyle,
{
height: height,
marginTop: '-' + height,
backgroundColor: activeColor
}
]"
>
</view>
<view v-if="isRange"
class="u-slider__gap u-slider__gap-0"
:style="[
barStyle0,
{
height: height,
marginTop: '-' + height,
backgroundColor: inactiveColor
}
]"
>
</view>
<text v-if="isRange && showValue"
class="u-slider__show-range-value" :style="{left: (getPx(barStyle0.width) + getPx(blockSize)/2) + 'px'}">
{{ this.rangeValue[0] }}
</text>
<text v-if="isRange && showValue"
class="u-slider__show-range-value" :style="{left: (getPx(barStyle.width) + getPx(blockSize)/2) + 'px'}">
{{ this.rangeValue[1] }}
</text>
<template v-if="isRange">
<view class="u-slider__button-wrap u-slider__button-wrap-0" @touchstart="onTouchStart($event, 0)"
@touchmove="onTouchMove($event, 0)" @touchend="onTouchEnd($event, 0)"
@touchcancel="onTouchEnd($event, 0)" :style="{left: (getPx(barStyle0.width) + getPx(blockSize)/2) + 'px'}">
<slot name="min" v-if="$slots.min || $slots.$min"/>
<view v-else class="u-slider__button" :style="[blockStyle, {
height: getPx(blockSize, true),
width: getPx(blockSize, true),
backgroundColor: blockColor
}]"></view>
</view>
</template>
<view class="u-slider__button-wrap" @touchstart="onTouchStart"
@touchmove="onTouchMove" @touchend="onTouchEnd"
@touchcancel="onTouchEnd" :style="{left: (getPx(barStyle.width) + getPx(blockSize)/2) + 'px'}">
<slot name="max" v-if="isRange && ($slots.max || $slots.$max)"/>
<slot v-else-if="$slots.default || $slots.$default"/>
<view v-else class="u-slider__button" :style="[blockStyle, {
height: getPx(blockSize, true),
width: getPx(blockSize, true),
backgroundColor: blockColor
}]"></view>
</view>
</view>
<view class="u-slider__show-value" v-if="showValue && !isRange">{{ modelValue }}</view>
</template>
<slider
class="u-slider__native"
v-else
:min="min"
:max="max"
:step="step"
:value="modelValue"
:activeColor="activeColor"
:backgroundColor="inactiveColor"
:blockSize="getPx(blockSize)"
:blockColor="blockColor"
:showValue="showValue"
:disabled="disabled"
@changing="changingHandler"
@change="changeHandler"
></slider>
</view>
</template>
<script>
import { props } from './props';
import { mpMixin } from '../../libs/mixin/mpMixin';
import { mixin } from '../../libs/mixin/mixin';
import { addStyle, getPx, sleep } from '../../libs/function/index.js';
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom')
// #endif
/**
* slider 滑块选择器
* @tutorial https://uview-plus.jiangruyi.com/components/slider.html
* @property {Number | String} value 滑块默认值（默认0）
* @property {Number | String} min 最小值（默认0）
* @property {Number | String} max 最大值（默认100）
* @property {Number | String} step 步长（默认1）
* @property {Number | String} blockWidth 滑块宽度，高等于宽（30）
* @property {Number | String} height 滑块条高度，单位rpx（默认6）
* @property {String} inactiveColor 底部条背景颜色（默认#c0c4cc）
* @property {String} activeColor 底部选择部分的背景颜色（默认#2979ff）
* @property {String} blockColor 滑块颜色（默认#ffffff）
* @property {Object} blockStyle 给滑块自定义样式，对象形式
* @property {Boolean} disabled 是否禁用滑块(默认为false)
* @event {Function} changing 正在滑动中
* @event {Function} change 滑动结束
* @example <up-slider v-model="value" />
*/
export default {
name: 'u-slider',
mixins: [mpMixin, mixin, props],
emits: ["start", "changing", "change", "update:modelValue"],
data() {
return {
startX: 0,
status: 'end',
newValue: 0,
distanceX: 0,
startValue0: 0,
startValue: 0,
barStyle0: {},
barStyle: {},
sliderRect: {
left: 0,
width: 0
}
};
},
watch: {
// #ifdef VUE3
modelValue(n) {
// 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
if(this.status == 'end') this.updateValue(this.modelValue, false);
},
// #endif
// #ifdef VUE2
value(n) {
// 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
if(this.status == 'end') this.updateValue(this.value, false);
},
// #endif
rangeValue:{
handler(n){
if(this.status == 'end'){
this.updateValue(this.rangeValue[0], false, 0);
this.updateValue(this.rangeValue[1], false, 1);
}
},
deep:true
}
},
created() {
},
async mounted() {
// 获取滑块条的尺寸信息
if (!this.useNative) {
// #ifndef APP-NVUE
this.$uGetRect('.u-slider__base').then(rect => {
this.sliderRect = rect;
// console.log('sliderRect', this.sliderRect)
if (this.sliderRect.width == 0) {
console.info('如在弹窗等元素中使用，请使用v-if来显示滑块，否则无法计算长度。')
}
this.init()
});
// #endif
// #ifdef APP-NVUE
await sleep(30) // 不延迟会出现size获取都为0的问题
const ref = this.$refs['u-slider__base']
ref &&
dom.getComponentRect(ref, (res) => {
// console.log(res)
this.sliderRect = {
left: res.size.left,
width: res.size.width
};
this.init()
})
// #endif
}
},
methods: {
addStyle,
getPx,
init() {
if (this.isRange) {
this.updateValue(this.rangeValue[0], false, 0);
this.updateValue(this.rangeValue[1], false, 1);
} else {
// #ifdef VUE3
this.updateValue(this.modelValue, false);
// #endif
// #ifdef VUE2
this.updateValue(this.value, false);
// #endif
}
},
// native拖动过程中触发
changingHandler(e) {
const {
value
} = e.detail
// 更新v-model的值
// #ifdef VUE3
this.$emit("update:modelValue", value);
// #endif
// #ifdef VUE2
this.$emit("input", value);
// #endif
// 触发事件
this.$emit('changing', value)
},
// native滑动结束时触发
changeHandler(e) {
const {
value
} = e.detail
// 更新v-model的值
// #ifdef VUE3
this.$emit("update:modelValue", value);
// #endif
// #ifdef VUE2
this.$emit("input", value);
// #endif
// 触发事件
this.$emit('change', value);
},
onTouchStart(event, index = 1) {
if (this.disabled) return;
this.startX = 0;
// 触摸点集
let touches = event.touches[0];
// 触摸点到屏幕左边的距离
this.startX = touches.clientX;
// 此处的this.modelValue虽为props值，但是通过$emit('update:modelValue')进行了修改
if (this.isRange) {
this.startValue0 = this.format(this.rangeValue[0], 0);
this.startValue = this.format(this.rangeValue[1], 1);
} else {
// #ifdef VUE3
this.startValue = this.format(this.modelValue);
// #endif
// #ifdef VUE2
this.startValue = this.format(this.value);
// #endif
}
// 标示当前的状态为开始触摸滑动
this.status = 'start';
let clientX = 0;
// #ifndef APP-NVUE
clientX = touches.clientX;
// #endif
// #ifdef APP-NVUE
clientX = touches.screenX;
// #endif
this.distanceX = clientX - this.sliderRect.left;
// 获得移动距离对整个滑块的值，此为带有多位小数的值，不能用此更新视图
// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
this.newValue = ((this.distanceX / this.sliderRect.width) * (this.max - this.min)) + parseFloat(this.min);
this.status = 'moving';
// 发出moving事件
let $crtFmtValue = this.updateValue(this.newValue, true, index);
this.$emit('changing', $crtFmtValue);
},
onTouchMove(event, index = 1) {
if (this.disabled) return;
// 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件
// 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
if (this.status == 'start') this.$emit('start');
let touches = event.touches[0];
// console.log('touchs', touches)
// 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
let clientX = 0;
// #ifndef APP-NVUE
clientX = touches.clientX;
// #endif
// #ifdef APP-NVUE
clientX = touches.screenX;
// #endif
this.distanceX = clientX - this.sliderRect.left;
// 获得移动距离对整个滑块的值，此为带有多位小数的值，不能用此更新视图
// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
this.newValue = ((this.distanceX / this.sliderRect.width) * (this.max - this.min)) + parseFloat(this.min);
this.status = 'moving';
// 发出moving事件
let $crtFmtValue = this.updateValue(this.newValue, true, index);
this.$emit('changing', $crtFmtValue);
},
onTouchEnd(event, index = 1) {
if (this.disabled) return;
if (this.status === 'moving') {
let $crtFmtValue = this.updateValue(this.newValue, false, index);
this.$emit('change', $crtFmtValue);
}
this.status = 'end';
},
onTouchStart2(event, index = 1) {
if (!this.isRange) {
// this.onChangeStart(event, index);
}
},
onTouchMove2(event, index = 1) {
if (!this.isRange) {
// this.onTouchMove(event, index);
}
},
onTouchEnd2(event, index = 1) {
if (!this.isRange) {
// this.onTouchEnd(event, index);
}
},
onClick(event) {
// if (this.isRange) return;
if (this.disabled) return;
// 直接点击滑块的情况，计算方式与onTouchMove方法相同
// console.log('click', event)
// #ifndef APP-NVUE
// nvue下暂时无法获取坐标
let clientX = event.detail.x - this.sliderRect.left
this.newValue = ((clientX / this.sliderRect.width) * (this.max - this.min)) + parseFloat(this.min);
this.updateValue(this.newValue, false, 1);
// #endif
},
updateValue(value, drag, index = 1) {
// 去掉小数部分，同时也是对step步进的处理
let valueFormat = this.format(value, index);
// 不允许滑动的值超过max最大值
if(valueFormat > this.max ) {
valueFormat = this.max
}
// 设置移动的距离，不能用百分比，因为NVUE不支持。
let width = Math.min((valueFormat - this.min) / (this.max - this.min) * this.sliderRect.width, this.sliderRect.width)
let barStyle = {
width: width + 'px'
};
// 移动期间无需过渡动画
if (drag == true) {
barStyle.transition = 'none';
} else {
// 非移动期间，删掉对过渡为空的声明，让css中的声明起效
delete barStyle.transition;
}
// 修改value值
if (this.isRange) {
this.rangeValue[index] = valueFormat;
this.$emit("update:modelValue", this.rangeValue);
} else {
// #ifdef VUE3
this.$emit("update:modelValue", valueFormat);
// #endif
// #ifdef VUE2
this.$emit("input", valueFormat);
// #endif
}
switch (index) {
case 0:
this.barStyle0 = {...barStyle};
break;
case 1:
this.barStyle = {...barStyle};
break;
default:
break;
}
if (this.isRange) {
return this.rangeValue
} else {
return valueFormat
}
},
format(value, index = 1) {
// 将小数变成整数，为了减少对视图的更新，造成视图层与逻辑层的阻塞
if (this.isRange) {
switch (index) {
case 0:
return Math.round(
Math.max(this.min, Math.min(value, this.rangeValue[1] - parseInt(this.step),this.max))
/ parseInt(this.step)
) * parseInt(this.step);
break;
case 1:
return Math.round(
Math.max(this.min, this.rangeValue[0] + parseInt(this.step), Math.min(value, this.max))
/ parseInt(this.step)
) * parseInt(this.step);
break;
default:
break;
}
} else {
return Math.round(
Math.max(this.min, Math.min(value, this.max))
/ parseInt(this.step)
) * parseInt(this.step);
}
}
}
}
</script>
<style lang="scss" scoped>
@import "../../libs/css/components.scss";
.u-slider {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
&__native {
flex: 1;
}
&-inner {
flex: 1;
display: flex;
flex-direction: column;
position: relative;
border-radius: 999px;
padding: 10px 18px;
justify-content: center;
}
&__show-value {
margin: 10px 18px 10px 0px;
}
&__show-range-value {
padding-top: 2px;
font-size: 12px;
line-height: 12px;
position: absolute;
bottom: 0;
}
&__base {
background-color: #ebedf0;
}
/* #ifndef APP-NVUE */
&-inner:before {
position: absolute;
right: 0;
left: 0;
content: '';
top: -8px;
bottom: -8px;
z-index: -1;
}
/* #endif */
&__gap {
position: relative;
border-radius: 999px;
transition: width 0.2s;
background-color: #1989fa;
}
&__button {
width: 24px;
height: 24px;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background-color: #fff;
transform: scale(0.9);
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
&__button-wrap {
position: absolute;
// transform: translate3d(50%, -50%, 0);
}
&--disabled {
opacity: 0.5;
}
}
</style>