实现思路
具体实现思路如下:
- 布局方面我采用的是 rem + flex 布局,具体如何结构和样式可以参考我的代码,值得注意的是后面的删除按钮是我通过定位放在了每一行的最后,超出隐藏了而已
- 左滑和右滑是通过 touchstart 和 touchend 事件,通过判断滑动开始和结束,水平方向 x 的偏移量,如果大于一定得阈值认为是左滑动,小于一定的阈值则认为是右滑动
- 左滑动和右滑动分别都是通过父级 li 元素的 translate 偏移量进行变化的,这里我的实现方式是提前声明好样式,通过改变当前父级 li 的 type 值,进行样式切换
- 点击某一个滑块的时候,首先判断当前所有的滑块是否有处于 滑出状态的 ,如果有,则必须先将所有的滑块状态还原,如果没有,则点击生效,我这里只是弹出一个 alter ,具体业务可以根据实际填写
- 删除相对简单,当滑块画出后,出现删除按钮,点击按钮,拿到当前的数组索引值,通过数组的 splice 方法,删除对应的数组值即可
具体实现
Html代码
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | < div class = "container" > < div class = "page-title" >滑动组件</ div > < ul > < li class = "list-item " v-for = "(item,index) in list " data-type = "0" > < div class = "list-box" @ touchstart.capture = "touchStart" @ touchend.capture = "touchEnd" @ click = "skip" > < img class = "list-img" :src = "item.imgUrl" alt = "" > < div class = "list-content" > < p class = "title" >{{item.title}}</ p > < p class = "tips" >{{item.tips}}</ p > < p class = "time" >{{item.time}}</ p > </ div > </ div > < div class = "delete" @ click = "deleteItem" :data-index = "index" >删除</ div > </ li > </ ul > </ div > |
注意:我这里的数据全是本地 mock 的~
Css样式代码
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | .page-title{ text-align : center ; font-size : 17px ; padding : 10px 15px ; position : relative ; } .page-title:after{ content : " " ; position : absolute ; left : 0 ; bottom : 0 ; right : 0 ; height : 1px ; border-bottom : 1px solid #ccc ; color : #ccc ; -webkit-transform-origin: 0 100% ; transform-origin: 0 100% ; -webkit-transform: scaleY( 0.5 ); transform: scaleY( 0.5 ); z-index : 2 ; } . list-item { position : relative ; height : 1.6 rem; -webkit-transition: all 0.2 s; transition: all 0.2 s; } . list-item [data-type= "0" ]{ transform: translate 3 d( 0 , 0 , 0 ); } . list-item [data-type= "1" ]{ transform: translate 3 d( -2 rem, 0 , 0 ); } .list-item:after{ content : " " ; position : absolute ; left : 0.2 rem; bottom : 0 ; right : 0 ; height : 1px ; border-bottom : 1px solid #ccc ; color : #ccc ; -webkit-transform-origin: 0 100% ; transform-origin: 0 100% ; -webkit-transform: scaleY( 0.5 ); transform: scaleY( 0.5 ); z-index : 2 ; } .list-box{ padding : 0.2 rem; background : #fff ; display : flex; align-items: center ; -webkit-box-sizing: border-box; box-sizing: border-box; justify- content : flex-end; position : absolute ; top : 0 ; right : 0 ; bottom : 0 ; left : 0 ; font-size : 0 ; } . list-item .list-img{ display : block ; width : 1 rem; height : 1 rem; } . list-item .list-content{ padding : 0.1 rem 0 0.1 rem 0.2 rem; position : relative ; flex: 1 ; flex- direction : column; align-items: flex-start; justify- content : center ; overflow : hidden ; } . list-item .title{ display : block ; color : #333 ; overflow : hidden ; font-size : 15px ; font-weight : bold ; text- overflow : ellipsis; white-space : nowrap ; } . list-item .tips{ display : block ; overflow : hidden ; font-size : 12px ; color : #999 ; line-height : 20px ; text- overflow : ellipsis; white-space : nowrap ; } . list-item .time{ display : block ; font-size : 12px ; position : absolute ; right : 0 ; top : 0.1 rem; color : #666 ; } . list-item .delete{ width : 2 rem; height : 1.6 rem; background : #ff4949 ; font-size : 17px ; color : #fff ; text-align : center ; line-height : 1.6 rem; position : absolute ; top : 0 ; right : -2 rem; } |
这是核心的样式代码
微信公号搜索:遇见一朵小花。(或扫描二维码)找我玩啊只讲对你有用的东西。
也常常给粉丝寄出自己看完闲置的好书,喜欢看书的可以来看看,
还不定期在公众号请大家喝奶茶!
想与我聊聊或者有什么问题都可以在公众号找到我。
等你哟~