Implement left-slide deletion based on vue2 and vue2 implement slide Deletion

Implement left-slide deletion based on vue2 and vue2 implement slide Deletion

Sliding left to delete, many UI frameworks, such as Mint-UI and Muse-UI, were used at the beginning, but our requirement was: when sliding left, img appears and click Delete, as shown below:

Because the UI framework has to be changed to the underlying code ==, our team directly wrote a--, tired ...... This component is used in many places, so it is recommended to put it under common ..

<Template> <div class = "left-delete"> <div class = "move" @ touchstart = "_ touchStart" @ touchmove = "_ touchMove" @ touchend = "_ touchEnd ": style = "txtStyle"> <slot> </div> <div class = "deleteIcon": style = "zIndex" @ click. prevent = "deleteItem (index)"> </div> </template> <script> export default {props: {index: Number}, data () {return {startX: 0, // touch position moveX: 0, // The position disX: 0 when sliding, // The moving distance from txtStyle: '', delWidth: 200, top: '', zIndex: 'z-index:-1', }}, methods: {_ touchStart: function (ev) {ev = ev | event; if (ev. touches. length = 1) {// record the position when the finger is pressed this. startX = ev. touches [0]. clientX; console. log (this. startX) }}, _ touchMove: function (ev) {ev = ev | event; if (ev. touches. length = 1) {// real-time position during sliding this. moveX = ev. touches [0]. clientX // calculates the sliding distance in real time during the sliding process. this. disX = this. startX-this. moveX; // console. log ('disx => ', this. disX) // if it is sliding to the right or just clicking, do not change the sliding position if (this. disX <0 | this. disX = 0) {// console. log ('no mobile'); this.txt Style = "transform: translateX (0rem)";} else if (this. disX> 0) {if it is sliding to the left, a left offset-left is given to the root element in real time. When the offset reaches the fixed value of delWidth, the offset of the fixed element is delWidth this.txt Style = "transform: translateX (-" + this. disX/100 + "rem)"; if (this. disX> = this. delWidth/100) {this.txt Style = "transform: translateX (-" + this. delWidth/100 + "rem)"; this. zIndex = "z-index:" + 10 + "rem" ;}}}, _ touchEnd: function (ev) {if (event. changedTouches. length = 1) {this. startX = 0; this. zIndex = "z-index:" +-1 + "rem"; console. log (event. changedTouches [0]. clientX) // the horizontal position after the finger movement ends. let endX = event. changedTouches [0]. clientX; // The distance between the start and end of the touch and the movement of the finger. disX = this. startX-endX; // if the distance is less than 1/2 of the delete button, the delete button is not displayed. }}, deleteItem: function (index) {this. $ emit ('deleteitem', index) ;}}</script> <style>. left-delete {width: 100%; height: 100%; position: relative; z-index: 2 ;}. move {position: relative ;}. deleteIcon {width: 2rem; height: 100%; position: absolute; right: 0; top: 0; background: url (. /.. /.. /assets/main/4.png) no-repeat; background-size: contain;} </style>

Which page needs to be followed, and which page should be introduced. For example, the myCollect page is required as follows:

<Template> <section class = "myCollect"> <section> <div v-for = "(item, index) in collectionList"> <left-slider: index = "index" @ deleteItem = "deleteItem"> <Financial: item = "item ": index = "index"> </Financial> </left-slider> </div> </section> </template> <script> import api from '. /.. /.. /fetch/api '; import {mapGetters} from 'vuex'; import Financial from '. /.. /common/financial. vue '; import LeftSlider from '. /.. /common/leftSlider. vue '; export default {name: 'mycollect', props: {item: Object, index: Number}, components: {Financial, LeftSlider}, data () {return {}}, created () {this. getCollectionList () ;}, methods :{}, computed :{... mapGetters (['getcontextpathsrc', 'sessionid', 'Token']),}, methods: {// Delete deleteItem: function (index) {api. commonApi ('back-End Interface, request data') // here the api is encapsulated axios. For details, see vue2 + vuex + axios. then (res => {console. debug ("REQ_ADD_STORE.res.data.result->" + res. data. result); this. collectionList. splice (index, 1) ;}}}, mounted () {}}</script>

Then it is complete.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.