├── .gitattributes ├── .gitignore ├── README.md ├── app.js ├── app.json ├── app.wxss ├── images ├── icon0.png ├── icon1.png ├── icon2.png ├── icon3.png ├── icon4.png ├── icon5.png └── icon6.png └── pages └── leftSwiperDel ├── index.js ├── index.json ├── index.wxml └── index.wxss /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear on external disk 35 | .Spotlight-V100 36 | .Trashes 37 | 38 | # Directories potentially created on remote AFP share 39 | .AppleDB 40 | .AppleDesktop 41 | Network Trash Folder 42 | Temporary Items 43 | .apdisk 44 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wxapp-leftSwiperDel 2 | 微信小程序---左滑删除 3 | 4 | #效果图 5 | ![mahua](http://a3767c8e05b9af00df2d.b0.upaiyun.com/apicloud/05e36d4e5e46fddf6a8e42e47ba99d35.gif) 6 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | 2 | //app.js 3 | App({}); 4 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/leftSwiperDel/index" 4 | ], 5 | "window":{ 6 | "backgroundTextStyle":"dark", 7 | "backgroundColor": "#f2f2f2", 8 | "navigationBarBackgroundColor": "#fbfbfb", 9 | "navigationBarTitleText": "LeanTodo", 10 | "navigationBarTextStyle":"black" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .flex-wrap{ 3 | display: flex; 4 | flex-direction: row; 5 | } 6 | 7 | page { 8 | background-color: #f2f2f2; 9 | } 10 | 11 | .tappable:hover { 12 | opacity: .6; 13 | } -------------------------------------------------------------------------------- /images/icon0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyang749/wxapp-leftSwiperDel/4137b70d8900ad0d2692d963529c4251f2005854/images/icon0.png -------------------------------------------------------------------------------- /images/icon1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyang749/wxapp-leftSwiperDel/4137b70d8900ad0d2692d963529c4251f2005854/images/icon1.png -------------------------------------------------------------------------------- /images/icon2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyang749/wxapp-leftSwiperDel/4137b70d8900ad0d2692d963529c4251f2005854/images/icon2.png -------------------------------------------------------------------------------- /images/icon3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyang749/wxapp-leftSwiperDel/4137b70d8900ad0d2692d963529c4251f2005854/images/icon3.png -------------------------------------------------------------------------------- /images/icon4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyang749/wxapp-leftSwiperDel/4137b70d8900ad0d2692d963529c4251f2005854/images/icon4.png -------------------------------------------------------------------------------- /images/icon5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyang749/wxapp-leftSwiperDel/4137b70d8900ad0d2692d963529c4251f2005854/images/icon5.png -------------------------------------------------------------------------------- /images/icon6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yuanyang749/wxapp-leftSwiperDel/4137b70d8900ad0d2692d963529c4251f2005854/images/icon6.png -------------------------------------------------------------------------------- /pages/leftSwiperDel/index.js: -------------------------------------------------------------------------------- 1 | // pages/leftSwiperDel/index.js 2 | Page({ 3 | data:{ 4 | delBtnWidth:180//删除按钮宽度单位（rpx） 5 | }, 6 | onLoad:function(options){ 7 | // 页面初始化 options为页面跳转所带来的参数 8 | this.initEleWidth(); 9 | this.tempData(); 10 | }, 11 | onReady:function(){ 12 | // 页面渲染完成 13 | }, 14 | onShow:function(){ 15 | // 页面显示 16 | }, 17 | onHide:function(){ 18 | // 页面隐藏 19 | }, 20 | onUnload:function(){ 21 | // 页面关闭 22 | }, 23 | touchS:function(e){ 24 | if(e.touches.length==1){ 25 | this.setData({ 26 | //设置触摸起始点水平方向位置 27 | startX:e.touches[0].clientX 28 | }); 29 | } 30 | }, 31 | touchM:function(e){ 32 | if(e.touches.length==1){ 33 | //手指移动时水平方向位置 34 | var moveX = e.touches[0].clientX; 35 | //手指起始点位置与移动期间的差值 36 | var disX = this.data.startX - moveX; 37 | var delBtnWidth = this.data.delBtnWidth; 38 | var txtStyle = ""; 39 | if(disX == 0 || disX < 0){//如果移动距离小于等于0，文本层位置不变 40 | txtStyle = "left:0px"; 41 | }else if(disX > 0 ){//移动距离大于0，文本层left值等于手指移动距离 42 | txtStyle = "left:-"+disX+"px"; 43 | if(disX>=delBtnWidth){ 44 | //控制手指移动距离最大值为删除按钮的宽度 45 | txtStyle = "left:-"+delBtnWidth+"px"; 46 | } 47 | } 48 | //获取手指触摸的是哪一项 49 | var index = e.target.dataset.index; 50 | var list = this.data.list; 51 | if(index >= 0){ 52 | list[index].txtStyle = txtStyle; 53 | //更新列表的状态 54 | this.setData({ 55 | list:list 56 | }); 57 | } 58 | } 59 | }, 60 | 61 | touchE:function(e){ 62 | if(e.changedTouches.length==1){ 63 | //手指移动结束后水平位置 64 | var endX = e.changedTouches[0].clientX; 65 | //触摸开始与结束，手指移动的距离 66 | var disX = this.data.startX - endX; 67 | var delBtnWidth = this.data.delBtnWidth; 68 | //如果距离小于删除按钮的1/2，不显示删除按钮 69 | var txtStyle = disX > delBtnWidth/2 ? "left:-"+delBtnWidth+"px":"left:0px"; 70 | //获取手指触摸的是哪一项 71 | var index = e.target.dataset.index; 72 | var list = this.data.list; 73 | console.log(e); 74 | if(index >= 0){ 75 | list[index].txtStyle = txtStyle; 76 | //更新列表的状态 77 | this.setData({ 78 | list:list 79 | }); 80 | } 81 | } 82 | }, 83 | //获取元素自适应后的实际宽度 84 | getEleWidth:function(w){ 85 | var real = 0; 86 | try { 87 | var res = wx.getSystemInfoSync().windowWidth; 88 | var scale = (750/2)/(w/2);//以宽度750px设计稿做宽度的自适应 89 | // console.log(scale); 90 | real = Math.floor(res/scale); 91 | return real; 92 | } catch (e) { 93 | return false; 94 | // Do something when catch error 95 | } 96 | }, 97 | initEleWidth:function(){ 98 | var delBtnWidth = this.getEleWidth(this.data.delBtnWidth); 99 | this.setData({ 100 | delBtnWidth:delBtnWidth 101 | }); 102 | }, 103 | //点击删除按钮事件 104 | delItem:function(e){ 105 | //获取列表中要删除项的下标 106 | var index = e.target.dataset.index; 107 | var list = this.data.list; 108 | //移除列表中下标为index的项 109 | list.splice(index,1); 110 | //更新列表的状态 111 | this.setData({ 112 | list:list 113 | }); 114 | }, 115 | //测试临时数据 116 | tempData:function(){ 117 | var list = [ 118 | { 119 | txtStyle:"", 120 | icon:"/images/icon0.png", 121 | txt:"向左滑动可以删除" 122 | }, 123 | { 124 | txtStyle:"", 125 | icon:"/images/icon6.png", 126 | txt:"微信小程序|联盟（wxapp-union.com）" 127 | }, 128 | { 129 | txtStyle:"", 130 | icon:"/images/icon1.png", 131 | txt:"圣诞老人是爸爸，顺着烟囱往下爬，礼物塞满圣诞袜，平安糖果一大把" 132 | }, 133 | { 134 | txtStyle:"", 135 | icon:"/images/icon2.png", 136 | txt:"圣诞到来，元旦还会远吗？在圣诞这个日子里" 137 | }, 138 | { 139 | txtStyle:"", 140 | icon:"/images/icon3.png", 141 | txt:"圣诞节(Christmas或Cristo Messa ),译名为“基督弥撒”。" 142 | }, 143 | { 144 | txtStyle:"", 145 | icon:"/images/icon4.png", 146 | txt:"一年一度的圣诞节即将到来,姑娘们也纷纷开始跑趴了吧!" 147 | }, 148 | { 149 | txtStyle:"", 150 | icon:"/images/icon5.png", 151 | txt:"圣诞节(Christmas或Cristo Messa ),译名为“基督弥撒”。" 152 | }, 153 | { 154 | txtStyle:"", 155 | icon:"/images/icon2.png", 156 | txt:"你的圣诞节礼物准备好了吗?" 157 | }, 158 | { 159 | txtStyle:"", 160 | icon:"/images/icon3.png", 161 | txt:"一年一度的圣诞节即将到来,姑娘们也纷纷开始跑趴了吧!" 162 | }, 163 | { 164 | txtStyle:"", 165 | icon:"/images/icon4.png", 166 | txt:"圣诞到来，元旦还会远吗？" 167 | }, 168 | { 169 | txtStyle:"", 170 | icon:"/images/icon5.png", 171 | txt:"记下这一刻的心情" 172 | }, 173 | 174 | ]; 175 | 176 | this.setData({ 177 | list:list 178 | }); 179 | } 180 | 181 | }) 182 | -------------------------------------------------------------------------------- /pages/leftSwiperDel/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "navigationBarBackgroundColor": "#000000", 3 | "navigationBarTextStyle": "white", 4 | "navigationBarTitleText":"左滑删除列表项", 5 | "backgroundColor": "#eeeeee", 6 | "backgroundTextStyle": "light" 7 | 8 | } 9 | 10 | -------------------------------------------------------------------------------- /pages/leftSwiperDel/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{item.txt}} 7 | 删除 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /pages/leftSwiperDel/index.wxss: -------------------------------------------------------------------------------- 1 | /* pages/leftSwiperDel/index.wxss */ 2 | view{ 3 | box-sizing: border-box; 4 | } 5 | .item-box{ 6 | width: 700rpx; 7 | margin: 0 auto; 8 | padding:40rpx 0; 9 | } 10 | .items{ 11 | width: 100%; 12 | } 13 | .item{ 14 | position: relative; 15 | border-top: 2rpx solid #eee; 16 | height: 120rpx; 17 | line-height: 120rpx; 18 | overflow: hidden; 19 | 20 | } 21 | .item:last-child{ 22 | border-bottom: 2rpx solid #eee; 23 | } 24 | .inner{ 25 | position: absolute; 26 | top:0; 27 | } 28 | .inner.txt{ 29 | background-color: #fff; 30 | width: 100%; 31 | z-index: 5; 32 | padding:0 10rpx; 33 | transition: left 0.2s ease-in-out; 34 | white-space:nowrap; 35 | overflow:hidden; 36 | text-overflow:ellipsis; 37 | } 38 | .inner.del{ 39 | background-color: #e64340; 40 | width: 180rpx;text-align: center; 41 | z-index: 4; 42 | right: 0; 43 | color: #fff 44 | } 45 | .item-icon{ 46 | width: 64rpx; 47 | vertical-align: middle; 48 | margin-right: 16rpx 49 | } 50 | .thumb{ 51 | width: 200px; 52 | height: 200px; 53 | -webkit-overflow-scrolling: touch; 54 | overflow: scroll; 55 | } --------------------------------------------------------------------------------