컴퓨터 지식 네트워크 - 컴퓨터 구성 - js는 QQ에서 연락처를 왼쪽으로 밀고 삭제 버튼을 밀어내는 동작을 모방합니다.

js는 QQ에서 연락처를 왼쪽으로 밀고 삭제 버튼을 밀어내는 동작을 모방합니다.

채택될 수 있기를 바랍니다

순수한 js 구현

h5 touchmove 및 기타 이벤트를 사용하고 js를 사용하여 CSS3 번역 속성을 동적으로 변경하여 애니메이션 효과 달성 :

< Meta?name="viewport"?id="viewport"?content="width=device-width,?initial-scale=1"> 특수 효과를 삭제하려면 html5 왼쪽으로 슬라이드

메시지 목록

특급 배송이 도착했습니다. 아래층으로 가서 서명하시기 바랍니다.

삭제

와, 뭐하는 거야 빨리 와. 기다리고 있어요 삭제

X:?

objX:?

initX:?

moveX:?

$(function()?{ $ ('.list-li ').touchWipe({itemDelete:?'.btn'}) });

효과:

버그 제거

위 단계로 진행하면 기본적으로 필요한 기능을 얻을 수 있습니다.

그러나 몇 가지 문제가 있습니다:

1. 스팬이 큰 버튼에 버블링될 수 없기 때문에 오른쪽의 삭제 버튼이 클릭되지 않습니다.

2. div로 touchmove 이벤트가 차단되고 원래 브라우저 이벤트가 PreventDefault()로 차단되어 div를 위아래로 슬라이드할 때 페이지를 스크롤할 수 없게 됩니다! 첫 번째 문제는 상대적으로 해결하기 쉽습니다. 다음과 같이 스팬을 직접 제거하고 CSS의 :before에 "delete"를 씁니다.

.itemWipe .item-delete:before {

?content: 'delete';

?color: #fff;

}

두 번째 문제의 경우 인터넷에서 iscroll을 사용하면 된다고 합니다. 그것을 해결하십시오. 모바일QQ의 접점 슬라이딩 동작에 대해 설명합니다.

일반 원리: 슬라이딩 시작 시 Y축이 더 움직이는지, X축이 더 움직이는지를 결정합니다. X축 움직임이 크다면 슬라이딩 삭제 작업으로 판단하여 PreventDefault()를 사용하겠습니다;

위 내용이 이 글의 전체 내용이므로 도움이 되셨으면 좋겠습니다. 모두의 배움에.

上篇: 비보 핸드폰은 국산인가요? 下篇: QQ 친구 목록의 친구 배열 규칙은 무엇입니까?
관련 내용