微信小程序实现原生步骤条
本文实例为大家分享了微信小程序实现原生步骤条的具体代码,供大家参考,具体内容如下
创新互联-专业网站定制、快速模板网站建设、高性价比瑶海网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式瑶海网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖瑶海地区。费用合理售后完善,十多年实体公司更值得信赖。
效果
(步骤条颜色不对是录制工具的问题)
思路
其实与轮播图类似,使用了两个并排的轮播容器,在滑动监听后,给图片加上移动和缩放动画。
扩展
可以用于标签页的切换。
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 }) } } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
网站题目:微信小程序实现原生步骤条
文章起源:http://myzitong.com/article/ipjise.html