Пример разработки апплета Wechat, смахивающего влево, удаляющего функцию

внешний интерфейс Апплет WeChat

Переходя непосредственно к теме, все, что нам нужно сделать, это провести пальцем по элементу списка, и с правой стороны появится надпись «Удалить»; Например вот так:

微信小程序：52魔都

После свайпа влево появятся следующие эффекты:

微信小程序：52魔都

Начать кодирование~ Предположим, у нас есть N элементов списка из списка массивов, сначала определите базовую структуру

<view class="list" wx:for="{{list}}" wx:key>
    <view class="item">
        <view class="wrap">{{item}}</view>
        <view class="delete"><text>删除</text></view>
    </view>
</view>

Он был помещен в обертку, так как в элементе отображается содержимое контейнера, контейнера и кнопка удаления для удаления. Когда мы завершаем слайды пальцев влево, переехав в контейнер левой обертки; удалить на этот раз от контейнера после завершения обертывания; другими словами, нам нравятся контейнерное отверстие для удаления контейнера, так что обернуть по умолчанию. Да, мы используем стили для достижения результатов.

.item{ position:relative; }
.wrap{ 
  position:absolute;z-index:2; top:0;left:0;
  backgorund:#fff;width:100%;height:100%;
}
.delete{ position:absolute;z-index:1; top:0;right:0;width:120rpx;height:100%;}


<view class="wrap" 
  data-index="{{index}}" 
  bindtouchstart='touchstart' 
  bindtouchmove='touchmove' 
  bindtouchend='touchend'
>{{item}}</view>


  touchstart:function(e){
    this.setData({
      index: e.currentTarget.dataset.index,
      Mstart: e.changedTouches[0].pageX
    });
  }

С помощью метода touchstart мы сохраняем индекс элемента, который в данный момент запускает событие, в index и получаем координаты текущего касания пальца e.changedTouches[0].pageX;

e.changedTouches[0].pageX

Координаты левого верхнего угла экрана равны (0,0), и чем больше расстояние от левого верхнего угла, тем больше значение pageX.

Далее, когда мы перемещаем палец, чтобы провести пальцем влево:

  touchmove: function (e) {
    //列表项数组
    let list = this.data.list;
    //手指在屏幕上移动的距离
    //移动距离 = 触摸的位置 - 移动后的触摸位置
    let move = this.data.Mstart - e.changedTouches[0].pageX;
    // 这里就使用到我们之前记录的索引index
    //比如你滑动第一个列表项index就是0，第二个列表项就是1，···
    //通过index我们就可以很准确的获得当前触发的元素，当然我们需要在事前为数组list的每一项元素添加x属性
    list[this.data.index].x = move > 0 ? -move : 0;
    this.setData({
      list: list
    });
  }

Когда перемещенная позиция касания меньше исходной позиции триггера, это означает, что палец скользит влево, потому что чем меньше страницаX, тем ближе она к краю экрана; в это время перемещение — это расстояние что контейнер для упаковки должен переместиться влево. Мы переписываем значение list[this.data.index].x и перезаписываем исходный список, чтобы мы могли видеть эффект перемещения элемента пальцем в реальном времени при скольжении; В это время мы можем обнаружить, что если мы продолжим двигаться влево, элемент обтекания будет сдвинут к краю экрана, это явно не тот эффект, который нам нужен Мы хотим остановить скольжение после скольжения на определенное расстояние, так что добавляем последний метод;

  touchend: function (e) {
    let list = this.data.list;
    let move = this.data.Mstart - e.changedTouches[0].pageX;
    list[this.data.index].x = move > 100 ? -180 : 0;
    this.setData({
      list: list
    });
  },

Единственная разница, которую мы видим, где этот метод является то, что линия

list[this.data.index].x = move > 100 ? -180 : 0

Это означает, что когда палец покидает элемент, если пройденное расстояние больше 100, то элемент автоматически переместится влево на расстояние 180, если меньше 100, то элемент продолжит движение вправо. Затем мы добавляем стиль к элементу обтекания, чтобы он мог перемещаться на расстояние x. Что касается того, почему расстояние перемещения нужно делить на 2, это связано с использованием единиц rpx в апплете; До того, как мы написали 100, -180 — это пиксельные px, которые нужно преобразовать в rpx;Документ единицы измерения разработки апплета WeChat

устройство rpx в px (ширина экрана/750) px в rpx (750/ширина экрана) iPhone5, 1 пикс = 0,42 пикс, 1 пикс = 2,34 пикс iPhone6, 1 пикселя = 0,5 пикселя, 1 пикселя = 2 пикселя iPhone6 ​​Plus, 1 rpx = 0,552 px, 1 px = 1,81 rpx

Мы видим, что соотношение в основном в 2 раза;

<view class="wrap" 
  style="transform:translateX({{item.x/2}}px);"
  data-index="{{index}}" 
  bindtouchstart='touchstart' 
  bindtouchmove='touchmove' 
  bindtouchend='touchend'
>{{item}}</view>

Наконец, мы используем стили, чтобы добавить эффекты перехода к элементу обтекания, и в основном мы закончили.

Подробные случаи можно найти в апплете WeChat: 52 Magic City.

Адрес источника:GitHub.com/749264345/ Я...

Категории