微信小程序简单实现手势左右滑动和点击滑动步骤条功能

最新推荐文章于 2025-01-06 16:14:57 发布

三脚猫的喵

最新推荐文章于 2025-01-06 16:14:57 发布

阅读量1.7k

点赞数 11

分类专栏：微信小程序文章标签：微信小程序 javascript 前端

本文链接：https://blog.csdn.net/weixin_45465881/article/details/136810305

版权

使用微信小程序实现左右滑动功能，自定义顶部图案，点击文字滑动和手势触屏滑动，功能简单，具体实现代码如下所示：
滑动示例

1、wxss代码：

/* 步骤条 */
.tab-box {
   
  display: flex;
  flex-direction: row;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 999;
  background-color: #EEEEEE;
  padding: 15rpx 20rpx;
}

.radius-a {
   
  width: 34%;
  border-radius: 5rpx 0 0 5rpx;
}

.width-2{
   
  width: 28%;
}

.radius-b {
   
  width: 28%;
  border-radius: 0 5rpx 5rpx 0;
}

.rule-a {
   
  height: 80rpx;
  background-color: #44ADFB;
  color: white;
  line-height: 80rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: bold;
}

.rule-b {
   
  w