侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

微信(小程序)  /  管理员 发布于 2年前   390

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

效果

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

思路

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

扩展

可以用于标签页的切换。

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

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

您可能感兴趣的文章:

  • 微信小程序自定义组件实现环形进度条
  • 微信小程序实现圆形进度条动画
  • 微信小程序自定义音乐进度条的实例代码
  • 微信小程序多音频播放进度条问题
  • 微信小程序画布圆形进度条显示效果
  • 微信小程序之圆形进度条实现思路
  • 微信小程序实现下载进度条的方法
  • 微信小程序实现实时圆形进度条的方法示例
  • 详解微信小程序――自定义圆形进度条


  • 上一条:
    微信小程序与公众号卡券/会员打通的问题
    下一条:
    微信小程序自定义单项选择器样式
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 百度小程序详情页中使用wxapp-rich-text组件解析html标签并展示出来(0个评论)
    • 百度小程序列表中点击跳转详情页流程步骤(0个评论)
    • 百度小程序封装get post请求等全局函数及实现请求后端api数据循环展示功能(0个评论)
    • 近期文章
    • zongscan祝大家2023元宵节快乐(0个评论)
    • 2023年国内最新注册苹果开发者账号之申请邓白氏编码流程步骤(0个评论)
    • 2023年国内最新注册苹果个人开发者账号及支付会员年费流程步骤(0个评论)
    • 在js中使用URL类用来解析处理URL的示例代码(0个评论)
    • js中动画事件:requestAnimationFrame、transitionend、animation...(0个评论)
    • Laravel 9.49版本发布(0个评论)
    • 在Laravel应用程序如何减少代码重复编写(0个评论)
    • 在laravel项目中提高安全性方式推荐:CSP内容安全策略(0个评论)
    • 在go语言中从值中获取常量名称代码示例(0个评论)
    • 在go语言中如何通过名称获得结构字段和值代码示例(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客