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


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下相关操作与插件
Oct 01 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 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 HtmlReplace输入过滤安全函数
2010/07/03 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
javascript 定义初始化数组函数
2009/09/07 Javascript
window.print打印指定div实例代码
2013/12/13 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
2014/10/21 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
JavaScript常用字符串与数组扩展函数小结
2016/04/24 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
微信小程序实战篇之购物车的实现代码示例
2017/11/30 Javascript
浅析vue中常见循环遍历指令的使用 v-for
2018/04/18 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
sublime text 3配置使用python操作方法
2017/06/11 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
CSS3系列教程:背景图片(背景大小和多背景图) 应用说明
2012/12/19 HTML / CSS
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
《长相思》听课反思
2014/04/10 职场文书
小学生倡议书范文
2014/05/13 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
PHP基本语法
2021/03/31 PHP
python调试工具Birdseye的使用教程
2021/05/25 Python
基于Redis的List实现特价商品列表功能
2021/08/30 Redis