微信小程序实现原生步骤条

微信(小程序)  /  管理员 发布于 3年前   431

本文实例为大家分享了微信小程序实现原生步骤条的具体代码，供大家参考，具体内容如下

效果

（步骤条颜色不对是录制工具的问题）

思路

其实与轮播图类似，使用了两个并排的轮播容器，在滑动监听后，给图片加上移动和缩放动画。

扩展

可以用于标签页的切换。

vue与微信小程序有类似的地方，所以微信小程序做出的效果，原理也可用于vue在网页上的应用。

代码

wxml

wxss

.window{ width: 450rpx; background-color: #eee; padding: 25rpx; position: relative; overflow: hidden; margin: 0 auto; border-radius: 20rpx;}.content{ display: flex; position: relative; transition: all 0.5s;}.content>view{ display: flex; flex-direction: column; align-items: center;}.pot{ width: 450rpx; display: flex; align-items: center; justify-content: space-between;}.circle{ border-radius: 100%; height: 20rpx; width: 20rpx; border:4rpx solid orange;}.line{ height: 4rpx; width: 50%; background: orange;}.blank{ height: 4rpx; width: 50%;}.pic_container{ width: 450rpx; height: 450rpx; display: flex; justify-content:center; align-items: center;}.pic{ width: 400rpx; height: 400rpx; transition: all 0.5s;}

js

Page({ data: {  list: ['1', '2', '3'],  left:0,  show_index:0 },  onLoad: function () {  this.setData({   length:this.data.list.length  }) },  touchS:function(e){  var that = this;  this.data.start = e.touches[0].pageX;  this.data.start_left = this.data.left; },  touchE:function(e){  var that = this;  this.data.end = e.changedTouches[0].pageX;  var distance = this.data.end - this.data.start;  //左滑  if (distance <= -40 && this.data.left > -900) {   this.setData({    left: that.data.start_left - 450,    show_index:++ this.data.show_index   })  }  //不滑  else if(distance <= 40){   this.setData({    left: that.data.start_left,   })  }  //右滑  else if (distance > 40 && this.data.left < 0) {   this.setData({    left: that.data.start_left + 450,    show_index: --this.data.show_index   })  } } })

 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 微信小程序自定义组件实现环形进度条
• 微信小程序实现圆形进度条动画
• 微信小程序自定义音乐进度条的实例代码
• 微信小程序多音频播放进度条问题
• 微信小程序画布圆形进度条显示效果
• 微信小程序之圆形进度条实现思路
• 微信小程序实现下载进度条的方法
• 微信小程序实现实时圆形进度条的方法示例
• 详解微信小程序――自定义圆形进度条