微信小程序scroll-view组件的使用

最新推荐文章于 2024-08-05 22:43:05 发布

饭碗不保啊

最新推荐文章于 2024-08-05 22:43:05 发布

阅读量359

点赞数

文章标签：前端微信小程序

本文链接：https://blog.csdn.net/weixin_72709530/article/details/126545756

版权

一.样式展示

缺陷：向左滑到一半，松手也不会恢复到原状

二.代码展示

.task{
  width: 750rpx;
  height: auto;
  margin-top: 10rpx;
  background-color: #ffffff;
}
.page{
  white-space: nowrap;
  width: 715rpx;
  height: 250rpx;
  border-bottom:1px solid #e7e5e5;
  margin: 0 auto;
}
.page1{
  display: inline-block;
  margin-top: 31rpx;
  padding-left: 23rpx;
}
.page1 .box2{
  display: flex;
  align-items: center;
}
.page1 .box2 .t1{
  font-size: 30rpx;
  color: #000000;
}
.page1 .box2 .t2{
  font-size: 20rpx;
  padding-left: 22rpx;
  line-height: 19px;
  letter-spacing: 0px;
  color: #ffffff;
  z-index: 1;
}
.page1 .box2 .T1{
  width: 80rpx;
  height: 30rpx;
  position: relative;
  left: -68rpx;
  background-color: #00b14f;
  border-radius: 4px;
  z-index: 0;
}
.page1 .box1 .t3{
  font-size: 28rpx;
  line-height: 48rpx;
  color: #999999;
}
.page1 .box1 .t4{
  font-size: 28rpx;
  line-height: 48rpx;
  letter-spacing: 0px;
  color: #333333;
}
.page1 .box1 .t5{
  font-family: 'DIN';
  font-size: 30rpx;
}
.page1 .p1{
  width: 160rpx;
  height: 160rpx;
  border-radius: 4rpx; 
  position: relative;
  left: 530rpx;
  top: -180rpx;
}
.page .page2{
  display: inline-block;
  display: flex;
  height: 250rpx;
  width: 320rpx;
  position: relative;
  left: 714rpx;
  top: -400rpx;
}
.page .page2 .t1{
  width: 160rpx;
  height: 250rpx;
  background-color:#ff5454;
  font-size: 26rpx;
  line-height: 250rpx;
  text-align: center;
  letter-spacing: 0px;
  color: #ffffff;
}
.page .page2 .t2{
  width: 160rpx;
  height: 250rpx;
  background-color: #00b3ea;
  font-size: 26rpx;
  line-height: 250rpx;
  text-align: center;
  letter-spacing: 0px;
  color: #ffffff;
}
.page .page2 .delete{
  width: 23rpx;
  height: 22rpx;
}
.page .page2 .modify{
  width: 23rpx;
  height: 22rpx;
}