如图:

  小程序左滑删除,可上下滑动

 

代码:

  

  1 .userInfoView{
  2   width: 100%;
  3   height: 592rpx;
  4   margin-top: 40rpx;
  5   padding-bottom: 20rpx;
  6 }
  7 .userInfoLi{
  8   width: 100%;
  9   height: 176rpx;
 10   background-color: #F8F9FC;
 11   margin-bottom: 20rpx;
 12   border-radius: 8rpx;
 13 }
 14 .userinfonName{
 15   position: absolute;
 16   left: 108rpx;
 17   top: 24rpx;
 18   font-size: 28rpx;
 19   color: #333333;
 20 }
 21 .userinfoType{
 22   margin-left: 20rpx;
 23   color: #999999;
 24   font-size: 24rpx;
 25 }
 26 .userinfoCord{
 27   position: absolute;
 28   left: 108rpx;
 29   top: 74rpx;
 30   font-size: 24rpx;
 31   color: #999999;
 32 }
 33 .userinfoncordNer{
 34   position: absolute;
 35   left: 212rpx;
 36   top: 74rpx;
 37   font-size: 24rpx;
 38   color: #999999;
 39 }
 40 .userinfoPhone{
 41   position: absolute;
 42   left: 108rpx;
 43   top: 118rpx;
 44   font-size: 24rpx;
 45   color: #999999;
 46 }
 47 .userinfoPhoneNer{
 48   position: absolute;
 49   left: 212rpx;
 50   top: 118rpx;
 51   font-size: 24rpx;
 52   color: #999999;
 53 }
 54 .userinfonAdit{
 55   position: absolute;
 56   left: 602rpx;
 57   top: 74rpx;
 58   width: 28rpx;
 59   height: 27rpx;
 60 }
 61 .touch-item {
 62   height: 176rpx;
 63   background-color: #F8F9FC;
 64   margin-bottom: 20rpx;
 65   border-radius: 8rpx;
 66   font-size: 14px;
 67   display: flex;
 68   justify-content: space-between;
 69   width: 100%;
 70   overflow: hidden
 71 }
 72 
 73 .content {
 74   width: 100%;
 75   margin-right:0;
 76   -webkit-transition: all 0.4s;
 77   transition: all 0.4s;
 78   -webkit-transform: translateX(90px);
 79   transform: translateX(90px);
 80   margin-left: -90px;
 81   position: relative;
 82 }
 83 .userCheckIcon{
 84   position: absolute;
 85   left: 40rpx;
 86   top: 74rpx;
 87   width: 28rpx;
 88   height: 28rpx;
 89 }
 90 .del {
 91   background-color: #F56141;
 92   width: 90rpx;
 93   display: flex;
 94   flex-direction: column;
 95   align-items: center;
 96   justify-content: center;
 97   color: #fff;
 98   -webkit-transform: translateX(90px);
 99   transform: translateX(90px);
100   -webkit-transition: all 0.4s;
101   transition: all 0.4s;
102   font-size: 28rpx;
103 }
104 
105 .touch-move-active .content,
106 .touch-move-active .del {
107   -webkit-transform: translateX(0);
108   transform: translateX(0);
109 }
View Code

相关文章:

  • 2022-12-23
  • 2021-11-19
  • 2021-10-01
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-20
猜你喜欢
  • 2021-06-16
  • 2022-12-23
  • 2022-12-23
  • 2021-09-30
相关资源
相似解决方案