123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- const BindingX = uni.requireNativePlugin('bindingx')
- const dom = uni.requireNativePlugin('dom')
- const animation = uni.requireNativePlugin('animation')
- export default {
- data() {
- return {
-
- x: 0,
-
- touching: false,
- changeFromInside: false
- }
- },
- watch: {
-
-
- 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()
- })
- },
-
-
- getSliderRect() {
-
-
- 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) {
-
-
-
-
-
-
-
-
-
-
-
-
- },
-
- onTouchMove(e) {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- const {
- x
- } = this.getTouchPoint(e)
- this.buttonWrapperStyle = {
- transform: `translateX(${x}px)`
- }
-
-
-
- },
-
-
-
-
-
-
-
- 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
- }
- }
- }
|