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


Posted in Javascript onJuly 25, 2019

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

效果

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

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

思路

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

扩展

可以用于标签页的切换。

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
   })
  }
 }
 
})

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
js遍历td tr等html元素
Dec 13 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
Dec 11 Javascript
javascript制作的简单注册模块表单验证
Apr 13 Javascript
基于js实现checkbox批量选中操作
Nov 22 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
微信小程序与公众号卡券/会员打通的问题
Jul 25 #Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 #Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 #Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
Jul 25 #Javascript
微信小程序实现收货地址左滑删除
Nov 18 #Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 #jQuery
微信小程序实现左滑动删除效果
Mar 30 #Javascript
You might like
php中检查文件或目录是否存在的代码小结
2012/10/22 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
PHP实现使用DOM将XML数据存入数组的方法示例
2017/09/27 PHP
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
jquery实现动静态条形统计图
2015/08/17 Javascript
js自定义回调函数
2015/12/13 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
详解vue组件基础
2018/05/04 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
使用layui 渲染table数据表格的实例代码
2018/08/19 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
培训自我鉴定
2014/01/31 职场文书
作文评语集锦
2014/12/25 职场文书
扬州个园导游词
2015/02/06 职场文书
会计专业求职信范文
2015/03/19 职场文书
管理失职检讨书
2015/05/05 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
2016年小学优秀班主任事迹材料
2016/02/29 职场文书
2019森林防火宣传标语大全!
2019/07/03 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript