[uni-app] Cómo uniapp implementa la eliminación al deslizar hacia la izquierda y transforma swiperAction en uni-ui

A menudo necesitamos implementar funciones como deslizar el dedo hacia la izquierda para eliminar o fijar en la parte superior. No publicaré imágenes de la estructura del cuadro de chat de eliminación similar a WeChat.

1-Cómo implementar deslizar hacia la izquierda para eliminar en uniapp

Estoy usando swiperAction en uni-ui y debo decir que el rendimiento es bastante bueno. Si desea encapsular manualmente este marco, puede descargar el código fuente para ver sus ideas de implementación. Para h5 y programas pequeños, touchstart y touchend se utilizan principalmente para el monitoreo.

Dirección del complemento: operación deslizante de acción uni-swipe-mercado de complementos DCloud

Dirección del documento: documento de acción

Referencia de código: lo que se demuestra aquí es el más utilizado. Puede ir al sitio web oficial para ver otro contenido.

<uni-swipe-action>
    //right-options 右滑出现的内容。left-options：左滑出现的内容
    <uni-swipe-action-item :right-options="options" :left-options="options" @click="onClick" @change="change">
        <view>这里是未滑动之前显示的内容</view>
    </uni-swipe-action-item>
</uni-swipe-action>

export default {
  data(){
    return {
      options:[
        {
            text: '取消',
            style: {
                backgroundColor: '#007aff'
            }
        }, {
            text: '确认',
            style: {
                backgroundColor: '#dd524d'
            }
        }
      ]
    }
  },
  methods:{
    onClick(e){
        //点击选项按钮时触发事件	
        //e = {content,index} ，content（点击内容）、index（下标）、position (位置信息)
    },
    swipeChange(e){
     	//组件打开或关闭时触发	
        // left:左侧 ，right：右侧，none：关闭
    }
  }
}

El efecto es el siguiente

Ventajas: Buena compatibilidad en todos los terminales, fluido y liviano 

Desventajas: solo puede configurar la versión de texto y no hay rebote en la animación, etc.

2-Cómo transformar la acción de deslizar el dedo para que admita imágenes

1. Primero busque la acción de deslizamiento en unimódulos

Puede definir la pieza que desea modificar buscando derecha o izquierda. Porque para el subprograma WeChat y h5, se implementa usando wxs, el lado de la aplicación nvue usa vinculantex y otras plataformas compatibles usan js.

(Debido a que aquí solo tengo un programa pequeño y necesidades h5, solo modifiqué esta parte. Si tiene otras necesidades, puede modificarlas según sea necesario)

 Al leer su código fuente, no es difícil descubrir que su artículo solo admite versiones de texto, por lo que solo necesitamos agregar la etiqueta de imagen. El código agregado es el siguiente:

Primero, se agrega la etiqueta de imagen y se establecen los atributos pasados ​​dinámicamente.

isImage: representa si la imagen entrante es una imagen. Si es una imagen, la parte de texto no se mostrará (por supuesto, si necesita que el texto y la imagen aparezcan al mismo tiempo, no es necesario agregar esto atributo)

src: la dirección de la imagen entrante. Se recomienda utilizar la dirección de red aquí. Al empaquetar imágenes de direcciones locales, es fácil causar problemas como que la ubicación de la imagen se confunda y no se pueda encontrar la imagen. 

imgWidth e imgHeight: son el ancho y alto de la imagen

	<image class="uni-swipe_img" v-if="item.isImage" :src="item.src" :style="{
							width:item.style.imgWidth,
							height:item.style.imgHeight
						}" />
						<text v-else class="uni-swipe_button-text"
							:style="{color: item.style && item.style.color ? item.style.color : '#FFFFFF',}">{
   
   { item.text }}</text>

Después de completar este paso, el contenido de entrada de la opción es

options: [{
					isImage: true,
					src: './delete.png',//这里只是为了演示，建议使用网络图片
					style: {
						backgroundColor: '#E02E00',
						imgWidth: '64rpx',
						imgHeight: '72rpx'
					}
				}]
			}

Efecto:

Todo el mundo debería ser bueno usando y modificando la rueda ~ ¡Vamos!