本文實例為大家分享了微信小程序實現原生步驟條的具體代碼，供大家參考，具體內容如下
效果
（步驟條顏色不對是錄制工具的問題）
思路
其實與輪播圖類似，使用了兩個并排的輪播容器，在滑動監聽后，給圖片加上移動和縮放動畫。
擴展
可以用于標簽頁的切換。
vue與微信小程序有類似的地方，所以微信小程序做出的效果，原理也可用于vue在網頁上的應用。
代碼
wxml
<view class='window'> <view class='content' bindtouchstart='touchS' bindtouchend='touchE' 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 class='{{index == length - 1?"blank":"line"}}'></view> </view> <!-- 圖片 --> <view class='pic_container'> <image class='pic' style='{{show_index != index?"transform:scale(0.5,0.5)":""}}' src="../../images/{{index+1}}.jpg"></image> </view> </view> </view></view>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 }) } } })以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
