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


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 中关于CSS操作部分使用说明
Jun 10 Javascript
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
Javascript 二维数组
Nov 26 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
JavaScript网页定位详解
Jan 13 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
vue之浏览器存储方法封装实例
Mar 15 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
JS实现简易图片自动轮播
Oct 16 Javascript
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
微信小程序与公众号卡券/会员打通的问题
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语法(2)
2006/10/09 PHP
PHP资源管理框架Assetic简介
2014/06/12 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
php post换行的方法
2020/02/03 PHP
JavaScript 特殊字符
2007/04/05 Javascript
JS实现从表格中动态删除指定行的方法
2015/03/31 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
微信小程序实现给循环列表添加点击样式实例
2017/04/26 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
js实现百度登录窗口拖拽效果
2020/03/19 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
关于angular引入ng-zorro的问题浅析
2020/09/09 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
JS中多层次排序算法的实现代码
2021/01/06 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
Python线程创建和终止实例代码
2018/01/20 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
使用 Python 在京东上抢口罩的思路详解
2020/02/27 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
阳光体育活动方案
2014/02/16 职场文书
销售助理岗位职责
2014/02/21 职场文书
先进人物事迹材料
2014/12/29 职场文书
行政经理岗位职责
2015/04/15 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
关于HTML编码导致的乱码问题
2021/09/04 HTML / CSS