mirror of
https://gitee.com/hhyykk/ipms-sjy.git
synced 2025-07-06 23:25:06 +08:00
uni-app引入使用uView
This commit is contained in:
sfmind
113
yudao-ui-app/uni_modules/uview-ui/components/u-slider/mpother.js
Normal file
113
yudao-ui-app/uni_modules/uview-ui/components/u-slider/mpother.js
Normal 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')
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
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() {
|
||||
// 获取滑块条的尺寸信息
|
||||
uni.$u.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
yudao-ui-app/uni_modules/uview-ui/components/u-slider/mpwxs.wxs
Normal file
121
yudao-ui-app/uni_modules/uview-ui/components/u-slider/mpwxs.wxs
Normal 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
|
||||
}
|
||||
@ -0,0 +1,180 @@
|
||||
/**
|
||||
* 使用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')
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// bindingx的回调值，用于取消绑定
|
||||
panEvent: null,
|
||||
// 标记是否移动状态
|
||||
moving: false,
|
||||
// 位移的偏移量
|
||||
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()
|
||||
},
|
||||
// 获取节点信息
|
||||
// 获取slider尺寸
|
||||
getSliderRect() {
|
||||
// 获取滑块条的尺寸信息
|
||||
// 通过nvue的dom模块，查询节点信息
|
||||
setTimeout(() => {
|
||||
dom.getComponentRect(this.$refs['slider'], res => {
|
||||
this.sliderRect = res.size
|
||||
this.initX()
|
||||
})
|
||||
}, 10)
|
||||
},
|
||||
// 初始化按钮位置
|
||||
initButtonStyle({
|
||||
barStyle,
|
||||
buttonWrapperStyle
|
||||
}) {
|
||||
this.barStyle = barStyle
|
||||
this.buttonWrapperStyle = buttonWrapperStyle
|
||||
},
|
||||
emitEvent(event, value) {
|
||||
this.$emit(event, value ? value : this.value)
|
||||
},
|
||||
formatStep(value) {
|
||||
// 移动点占总长度的百分比
|
||||
return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
|
||||
},
|
||||
// 滑动开始
|
||||
onTouchStart(e) {
|
||||
// 阻止页面滚动，可以保证在滑动过程中，不让页面可以上下滚动，造成不好的体验
|
||||
e.stopPropagation && e.stopPropagation()
|
||||
e.preventDefault && e.preventDefault()
|
||||
if (this.moving || this.disabled) {
|
||||
// 释放上一次的资源
|
||||
if (this.panEvent?.token != 0) {
|
||||
BindingX.unbind({
|
||||
token: this.panEvent.token,
|
||||
// pan为手势事件
|
||||
eventType: 'pan'
|
||||
})
|
||||
this.gesToken = 0
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
this.moving = true
|
||||
this.touching = true
|
||||
|
||||
// 获取元素ref
|
||||
const button = this.$refs['nvue-button'].ref
|
||||
const gap = this.$refs['nvue-gap'].ref
|
||||
|
||||
const {
|
||||
min,
|
||||
max,
|
||||
step
|
||||
} = this
|
||||
const {
|
||||
left,
|
||||
width
|
||||
} = this.sliderRect
|
||||
|
||||
// 初始值为本次偏移量x，加上次停止滑动时的结束值
|
||||
let exporession = `(${this.x} + x)`
|
||||
// 将偏移的x值，转为总位移的百分比值，为了和min和max进行判断
|
||||
exporession = `(${exporession} / ${width}) * 100`
|
||||
if (step > 1) {
|
||||
// 如果step步进大于1，需要跳步，所以需要使用Math.round进行取整
|
||||
exporession = `round(max(${min}, min(${exporession}, ${max})) / ${step}) * ${step}`
|
||||
} else {
|
||||
// 当step=1时，无需跳步，充分利用bindingx性能，滑块实时跟随手势，达到丝滑的效果
|
||||
exporession = `max(${min}, min(${exporession}, ${max}))`
|
||||
}
|
||||
// 将百分比最后转化为对应的px值
|
||||
exporession = `${exporession} / 100 * ${width}`
|
||||
// 最大值不允许超过轨迹的宽度
|
||||
const {
|
||||
sliderWidth
|
||||
} = this.sliderRect
|
||||
exporession = `min(${sliderWidth}, ${exporession})`
|
||||
// 滑块点总是需要一个左偏移的值，为自身宽度的一半
|
||||
const buttonExpression = `${exporession} - ${this.blockHeight / 2}`
|
||||
// 阿里为了KPI而开源的BindingX
|
||||
this.panEvent = BindingX.bind({
|
||||
anchor: button,
|
||||
eventType: 'pan',
|
||||
props: [{
|
||||
element: gap,
|
||||
// 绑定width属性，设置其宽度值
|
||||
property: 'width',
|
||||
expression
|
||||
}, {
|
||||
element: button,
|
||||
// 绑定width属性，设置其宽度值
|
||||
property: 'transform.translateX',
|
||||
expression: buttonExpression
|
||||
}]
|
||||
}, (e) => {
|
||||
if (e.state === 'end' || e.state === 'exit') {
|
||||
//
|
||||
this.x = uni.$u.range(0, left + width, e.deltaX + this.x)
|
||||
// 根据偏移值，得出移动的百分比，进而修改双向绑定的v-model的值
|
||||
const value = (this.x / width) * 100
|
||||
const percent = this.formatStep(value)
|
||||
// 修改value值
|
||||
this.$emit('input', percent)
|
||||
// 标记下一次触发value的watch时，这个值的变化，是由内部改变的
|
||||
this.changeFromInside = true
|
||||
this.moving = false
|
||||
this.touching = false
|
||||
}
|
||||
})
|
||||
},
|
||||
// 从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
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
193
yudao-ui-app/uni_modules/uview-ui/components/u-slider/nvue.js
Normal file
193
yudao-ui-app/uni_modules/uview-ui/components/u-slider/nvue.js
Normal 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')
|
||||
|
||||
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(uni.$u.range(this.min, this.max, value) / this.step) * this.step
|
||||
},
|
||||
getRange() {
|
||||
const {
|
||||
max,
|
||||
min
|
||||
} = this
|
||||
return max - min
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
export default {
|
||||
props: {
|
||||
// 最小可选值
|
||||
min: {
|
||||
type: [Number, String],
|
||||
default: uni.$u.props.slider.min
|
||||
},
|
||||
// 最大可选值
|
||||
max: {
|
||||
type: [Number, String],
|
||||
default: uni.$u.props.slider.max
|
||||
},
|
||||
// 步长，取值必须大于 0，并且可被(max - min)整除
|
||||
step: {
|
||||
type: [Number, String],
|
||||
default: uni.$u.props.slider.step
|
||||
},
|
||||
// 当前取值
|
||||
value: {
|
||||
type: [Number, String],
|
||||
default: uni.$u.props.slider.value
|
||||
},
|
||||
// 滑块右侧已选择部分的背景色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.slider.activeColor
|
||||
},
|
||||
// 滑块左侧未选择部分的背景色
|
||||
inactiveColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.slider.inactiveColor
|
||||
},
|
||||
// 滑块的大小，取值范围为 12 - 28
|
||||
blockSize: {
|
||||
type: [Number, String],
|
||||
default: uni.$u.props.slider.blockSize
|
||||
},
|
||||
// 滑块的颜色
|
||||
blockColor: {
|
||||
type: String,
|
||||
default: uni.$u.props.slider.blockColor
|
||||
},
|
||||
// 禁用状态
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.slider.disabled
|
||||
},
|
||||
// 是否显示当前的选择值
|
||||
showValue: {
|
||||
type: Boolean,
|
||||
default: uni.$u.props.slider.showValue
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<view
|
||||
class="u-slider"
|
||||
:style="[$u.addStyle(customStyle)]"
|
||||
>
|
||||
<slider
|
||||
:min="min"
|
||||
:max="max"
|
||||
:step="step"
|
||||
:value="value"
|
||||
:activeColor="activeColor"
|
||||
:inactiveColor="inactiveColor"
|
||||
:blockSize="$u.getPx(blockSize)"
|
||||
:blockColor="blockColor"
|
||||
:showValue="showValue"
|
||||
:disabled="disabled"
|
||||
@changing="changingHandler"
|
||||
@change="changeHandler"
|
||||
></slider>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import props from './props.js'
|
||||
export default {
|
||||
name: 'u--slider',
|
||||
mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
|
||||
methods: {
|
||||
// 拖动过程中触发
|
||||
changingHandler(e) {
|
||||
const {
|
||||
value
|
||||
} = e.detail
|
||||
// 更新v-model的值
|
||||
this.$emit('input', value)
|
||||
// 触发事件
|
||||
this.$emit('changing', value)
|
||||
},
|
||||
// 滑动结束时触发
|
||||
changeHandler(e) {
|
||||
const {
|
||||
value
|
||||
} = e.detail
|
||||
// 更新v-model的值
|
||||
this.$emit('input', value)
|
||||
// 触发事件
|
||||
this.$emit('change', value)
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../libs/css/components.scss";
|
||||
</style>
|
||||
Reference in New Issue
Block a user