1
This commit is contained in:
@@ -1,113 +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')
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 使用普通的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')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,43 +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)
|
||||
}
|
||||
}
|
||||
}
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,121 +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
|
||||
}
|
||||
/**
|
||||
* 使用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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user