Code de fonction coulissant du bouton du mini programme WeChat

Cet article présente principalement la méthode de réalisation du glissement des boutons dans l'applet WeChat. J'espère que cet article pourra aider tout le monde à réaliser une telle fonction. J'espère qu'il pourra aider tout le monde.

Comment implémenter le glissement des boutons dans le mini programme WeChat

1. Regardez les choses d'abord

Avant de glisser

Après avoir glissé

2. Ajoutez à nouveau le code

index.wxml

<view class="content">
  <view class="sliderContent">
    <input placeholder="验证码" placeholder-class="input-placeholder" disabled="{{disabled}}" />
    <view class="slider" bindtouchstart="moveSendBtnStart" bindtouchend="moveSendBtnEnd" bindtouchmove="moveSendBtn" style="left:{{moveSendBtnLeft}}rpx;background-color:{{SendBtnColor}}">发送</view>
  </view>
</view>

index.wxss

.content {
  margin-top: 100rpx;
  font-size: 24rpx;
}

.sliderContent{
  position: relative;
  margin: 0 auto;
  margin-bottom: 50rpx;
  padding-left: 60rpx;
  width: 425rpx;
  box-sizing: border-box;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 60rpx;
  background-color: #fff;
  color: #289adc;
  box-shadow: 0px 4px 6px 0px rgba(37, 114, 219, 0.3);
}

.sliderContent input {
  line-height: 70rpx;
  height: 70rpx;
  box-sizing: border-box;
  padding-left: 40rpx;
  width: 250rpx;
}

.input-placeholder {
  text-align: center;
  color: #289adc;
}


 .slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 150rpx;
  border-radius: 60rpx;
  text-align: center;
  background-color: #7f7f7f;
  color: #fff;
  box-shadow: 0px 4px 6px 0px rgba(37, 114, 219, 0.3);
}

index.js

Page({
  data: {
    moveStartX: 0, //起始位置
    moveSendBtnLeft: 0, //发送按钮的left属性
    moveEndX: 0, //结束位置
    screenWidth: 0, //屏幕宽度
    moveable: true, //是否可滑动
    disabled: true,//验证码输入框是否可用,
    SendBtnColor: "#7f7f7f" //滑动按钮颜色
  },

  onLoad: function () {
    var that = this;
    // 获取屏幕宽度
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          screenWidth: res.screenWidth
        })
      },
    })
  },
  //  开始移动
  moveSendBtnStart: function (e) {
    if (!this.data.moveable) {
      return;
    }
    console.log("start");
    console.log(e);
    this.setData({
      moveStartX: e.changedTouches["0"].clientX
    })
  },
  //移动发送按钮
  moveSendBtn: function (e) {
    if (!this.data.moveable) {
      return;
    }
    var that = this;
    // console.log(e.touches[0]);
    var left = ((e.touches[0].clientX - that.data.moveStartX) / (that.data.screenWidth / 750))
    console.log(left)
    if (left <= 275.5) {
      this.setData({
        moveSendBtnLeft: left
      })
    } else {

      this.setData({
        moveSendBtnLeft: 275.5
      })
    }
  },
  // 结束移动
  moveSendBtnEnd: function (e) {
    console.log("end");
    var that = this;
    var left = ((e.changedTouches[0].clientX - that.data.moveStartX) / (that.data.screenWidth / 750))
    console.log(left);
    if (left < 275.5) {
      for (let i = left; i >= 0; i--) {

        that.setData({
          moveSendBtnLeft: i
        })
      }
    } else {
      that.setData({
        moveEndX: e.changedTouches[0].clientX,
        moveable: false,
        disabled: false,
        SendBtnColor: "#289adc"
      })
    }
  }


})

3. >1. Événement de glissement du bouton

bindtouchstart //Le bouton commence à glisser

bindtouchend //Le bouton termine son glissementbindtouchmove //Le bouton glisse

L'enregistrement démarre lorsque le le bouton commence à glisser Position

Une fois le glissement terminé, il est nécessaire de déterminer si le bouton a glissé vers l'extrême droite. S'il n'a glissé que vers le milieu, il rebondira

<.> Pendant le processus de glissement, la distance par rapport à la position initiale doit être calculée. Ensuite, calculez et modifiez la valeur de l'attribut gauche du bouton

2. Calculez la distance de glissement du bouton

Parce que les valeurs renvoyées par l'événement coulissant sont toutes en px, et nous sommes La conception de l'interface utilise rpx Ici, nous devons effectuer des calculs numériques Dans onLoad, nous obtenons la largeur de l'appareil actuel. rpx est utilisé comme unité, la largeur logique de l'appareil actuel est considérée comme étant de 750rpx. Supposons que la largeur réelle de l'écran soit de 400px, alors 1px = 400/750 rpx, puis la distance de glissement = distance d'interaction réelle / (400). /750) rpx

Après la conversion, nous pouvons obtenir la distance de glissement en rpx comme unité.

Recommandations associées :

Exemple de la façon dont jQuery implémente la commutation coulissante des boutons gauche et droit en cliquant sur la souris

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!