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

效果

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

思路

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

扩展

可以用于标签页的切换。

某视频剪辑软件与微信小程序有类似的地方，所以微信小程序做出的效果，原理也可用于某视频剪辑软件在网页上的应用。

代码

页面结构

view class=' window ' view class=' content ' BindTouchStart=' TouchS ' BindTouchEnd=' Touch ' style=' left : { { left } } rpx ' view wx : for=' { { list } } '！-时间线-view class=' pot ' view class=' { { index==0？blank ' : ' line ' } } '/view view class=' circle ' style=' background : { { show _ index==index ' ' orange ' : ' ' } } '/view view view class=' { { index==length-1 '？blank':'line'}}'/view /view！-图片-view class=' pic _ container ' image class=' pic ' style=' { { show _ index！=索引？transform:scale(0.5，0.5)':''}}' src='http: '././images/{{index 1}} .jpg '/image/view/view/view/view wxss。窗口{ width: 450rpx背景色： # eeepadding: 25rpx相对位置：飞越：隐藏；margin: 0自动订单-半径： 20 rpx}.内容{ display:灵活相对位置：过渡：全部0.5s}。content view { display : flex flex-direction :柱；align-items:居中；}.锅{ width : 450 rpxdisplay : flex align-items :居中；正义-内容：空格；}.圆圈{边框-半径： 100%;高度： 20rpx宽度： 20 rpxborder:4rpx纯橙色；}.线{ height: 4rpx宽度： 50%;背景：橙色；}.空白{ height: 4rpx宽度： 50%;}.pic _ container { width : 450 rpx；高度： 450 rpxdisplay : flex justice-内容中心：align-items:居中；}.pic { width: 400rpx高度： 400 rpx过渡：全部0.5s}js

Page({ data: { list: ['1 '，' 2 '，' 3']，left:0，show_index:0 }，onload : function(){ this。setdata({ length : this。数据。名单。length })}，触摸3360功能(e){ var那=这是。数据。start=e . touch[0 ].这是。数据。start _ left=this。数据。向左；}，touch : function(e){ var即=这是。数据。end=e . changedtouches.pageXvar距离=这个。数据。结束这一切。数据。开始；//左滑if(距离=-40这个。数据。左-900){这个。setdata({ left :那。数据。start _ left-450，show _ index :这个。数据。show _ index })}//不滑否则如果(距离=40){这个。setdata({ left :那。数据。start _ left，}) } //右滑否则如果(距离40这个。数据。左0){这。setdata({ left :那。数据。start _ left 450，show _ index :-这个。数据。show _ index })} })以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。