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


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 相关文章推荐
jquery $.ajax入门应用一
Nov 19 Javascript
jQuery 跨域访问问题解决方法
Dec 02 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
javascript some()函数用法详解
2014/11/13 PHP
php文件夹的创建与删除方法
2015/01/24 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
require简单实现单页应用程序(SPA)
2016/07/12 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
Python基本数据类型详细介绍
2014/03/11 Python
python获取网页状态码示例
2014/03/30 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
使用Python写个小监控
2016/01/27 Python
pycharm设置注释颜色的方法
2018/05/23 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
python实现广度优先搜索过程解析
2019/10/19 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
vue项目实现分页效果
2021/03/24 Vue.js
大学生蛋糕店创业计划书
2014/01/13 职场文书
军训教官感言
2014/03/02 职场文书
2014年小学生教师节演讲稿范文
2014/09/10 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
2019七夕节祝福语36句,快来收藏吧
2019/08/06 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书