微信小程序可移动浮动客服按钮

• 使用技术 Taro
• 微信小程序 WSX

先看下效果图（免费的只能截取60帧，所以分3个图吧）

1.gif

2.gif

3.gif

一开始我是选择用选择用setState的方式，在原生就是setData了修改浮动框的坐标，后来发现太卡了，而且真机操作一点都不流畅，通过一番搜索，最后找到了微信小程序的wsx

直接上代码吧

// CustomerService.js

import Taro, { Component } from '@tarojs/taro';
import { View, Image, Button } from '@tarojs/components';
import styles from './CustomerService.module.less';
import './CustomerService.less';
class CustomerService extends Component {
    constructor() {
        super(...arguments)
        this.state = {
            active: false,
            startPoint: [0, 300],
            maxHeight: Taro.getSystemInfoSync().windowHeight
        }
    }

    test = (styles) => {
        this.setState({
            active: false
        })
    }

    render() {
        const { startPoint, active, maxHeight } = this.state;
        return (
                <View className={styles.component + " " + "moveable"}    >
                    <wxs module="move" src="./move.wxs"></wxs>
                    <View
                        className={ styles.active + " " + ( active ? '' : " landLeft" ) } 
                        onTouchMove='{{move.touchmove}}' 
                        onTouchEnd='{{move.touchend}}'
                        data-height={maxHeight}
                        onTest={this.test}
                        id="land"
                    >
                        <Button className={styles.btn} hoverClass={"none"}  open-type="contact" >客服</Button>
                    </View>
                </View>
            
        )
    }
}

// 同目录下创建 move.wxs

function touchmove(event, ins) {
    var touch = event.touches[0] || event.changedTouches[0];
    var x = touch.clientX;
    var y = touch.clientY;

    var landInstance = ins.selectComponent('#land');
    landInstance.removeClass('landRight');
    landInstance.removeClass('landLeft');
    landInstance.addClass('activeRadius');

    var dataSet = landInstance.getDataset();
    var maxHeight = dataSet.height;

    ins.selectComponent('.moveable').setStyle({
        left: x - 30 + "px",
        top: y - 30 + "px"
    })
 
    return false
}

function touchend(event, ins) {
    var touch = event.touches[0] || event.changedTouches[0];
    var x = touch.clientX;
    var y = touch.clientY;
    var isLeft = x < 187.5;
    var addClassName = isLeft ? 'landLeft': 'landRight';
    var landInstance = ins.selectComponent('#land')
    var dataSet = landInstance.getDataset();
    var maxHeight = dataSet.height;
    var style = {
        top: y <= 0 ? 30 + 'px' : y >= maxHeight - 160 ? maxHeight - 160 + "px" :  y - 30 + "px"
    }

    if(isLeft) {
        style["left"] = 0 ;
       
    } else {
        style["right"] = 0;
      
    }
    
    ins.selectComponent('.moveable').setStyle(style)
    landInstance.removeClass("activeRadius");
    landInstance.removeClass(isLeft ? 'landRight' : 'landLeft')
    landInstance.addClass(addClassName)
    ins.callMethod("test", event);
    return false
}

module.exports = {
    touchmove: touchmove,
    touchend: touchend
}

//CustomerService.module.less  局部css,
    .component {
        position: fixed;
        top: 50%;
        z-index: 99;

        .landLeft,
        .landRight,
        .active {
            background-color: rgba(241, 241, 241, 0.75);
            border: 1px solid #d9d9d9;
            padding: 15px 15px;
            
            .btn {
                width: 75px;
                height: 75px;
                background-color: rgb(246, 166, 67);
                border-radius: 50%;
                color: #fff;
                font-size: 26px;
                padding: 0 0;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
            }
        }     
    }

// CustomerService.module.less 全局css
.landLeft {
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}
.landRight {
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}

.activeRadius {
    border-radius: 50%;
    padding: 18px;
}

时间匆忙，暂时记录着