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

微信小程序实现卡片层叠滑动效果

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

本文实例为大家分享了微信小程序之卡片层叠滑动效果的具体代码,供大家参考,具体内容如下

代码:

js:

// index/gun/jsSwiper2/jsSwiper2.jsPage({ /** * 页面的初始数据 */ data: { startX: 0, endX: 0, iCenter: 3, datas: [{  id: 1,  zIndex: 2,  opacity: 0.2,  left: 40,  iamge: "../../images/1.jpg",  animation: null }, {  id: 2,  zIndex: 4,  opacity: 0.4,  left: 80,  iamge: "../../images/2.jpg",  animation: null }, {  id: 3,  zIndex: 6,  opacity: 0.6,  left: 120,  iamge: "../../images/3.jpg",  animation: null }, {  id: 4,  zIndex: 8,  opacity: 1,  left: 160,  iamge: "../../images/4.jpg",  animation: null }, {  id: 5,  zIndex: 6,  opacity: 0.6,  left: 200,  iamge: "../../images/5.jpg",  animation: null }, {  id: 6,  zIndex: 4,  opacity: 0.4,  left: 240,  iamge: "../../images/6.jpg",  animation: null }, {  id: 7,  zIndex: 2,  opacity: 0.2,  left: 280,  iamge: "../../images/7.jpg",  animation: null }, ], order: [] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.__set__(); this.move(); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, move: function () { var datas = this.data.datas; /*图片分布*/ for (var i = 0; i < datas.length; i++) {  var data = datas[i];  var animation = wx.createAnimation({  duration: 200  });  animation.translateX(data.left).step();  this.setData({  ["datas[" + i + "].animation"]: animation.export(),  ["datas[" + i + "].zIndex"]: data.zIndex,  ["datas[" + i + "].opacity"]: data.opacity,  }) } }, /**左箭头 */ left: function () { // var last = this.data.datas.pop(); //获取数组的最后一个 this.data.datas.unshift(last);//放到数组的第一个 var orderFirst = this.data.order.shift(); this.data.order.push(orderFirst); this.move(); }, /** */ right: function () { var first = this.data.datas.shift(); //获取数组的第一个 this.data.datas.push(first);//放到数组的最后一个位置 var orderLast = this.data.order.pop(); this.data.order.unshift(orderLast); this.move(); }, /**点击某项 */ choose: function (e) { var that = this; var id = e.currentTarget.dataset.id; var order = that.data.order; var index = 0; for (var i = 0; i < order.length; i++) {  if (id == order[i]) {  index = i;  break;  } } if (index < that.data.iCenter) {  for (var i = 0; i < that.data.iCenter - index; i++) {  this.data.datas.push(this.data.datas.shift()); //获取第一个放到最后一个  this.data.order.unshift(this.data.order.pop());  // this.right()   } } else if (index > that.data.iCenter) {  for (var i = 0; i < index - that.data.iCenter; i++) {  this.data.datas.unshift(this.data.datas.pop()); //获取最后一个放到第一个  this.data.order.push(this.data.order.shift());  // this.left();  } } this.move(); }, /**新的排列复制到新的数组中 */ __set__: function () { var that = this; var order = that.data.order; var datas = that.data.datas; for (var i = 0; i < datas.length; i++) {  that.setData({  ["order[" + i + "]"]: datas[i].id  }) } }, //手指触发开始移动 moveStart: function (e) { console.log(e); var startX = e.changedTouches[0].pageX; this.setData({  startX: startX }); }, //手指触摸后移动完成触发事件 moveItem: function (e) { console.log(e); var that = this; var endX = e.changedTouches[0].pageX; this.setData({  endX: endX }); //计算手指触摸偏移剧距离 var moveX = this.data.startX - this.data.endX; //向左移动 if (moveX > 20) {  this.left(); } if (moveX < -20) {  this.right(); } },})

wxml:

      
  • wxss:

    .teachers_banner { width: 100%; height: 650px; background-size: cover; position: relative; overflow: hidden;}.teachers_b { position: relative; margin-top: 80px;}#slide { margin: 0 auto; width: 100%; height: 350px; position: relative;}image { width: 400rpx; height: 550rpx;}#slide li { position: absolute; width: 400rpx; display: -webkit-box; display: -webkit-flex; display: flex; align-items: flex-start; -webkit-box-align: flex-start; -webkit-align-items: flex-start; overflow: hidden; box-shadow: 0 0 20px #1d374d;}#slide li img { width: 100%; height: 100%;}.slide_right { padding: 40px; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0;}.slide_right dl { padding-top: 10px;}.arrow .prev, .arrow .next { position: absolute; width: 50px; top: 38%; z-index: 9; font: 700 96px 'simsun'; opacity: 0.3; color: #fff; cursor: pointer;}

    效果:

    1.左右滑动时,向相应方向移动一个卡片位置;
    2.点击某一项时,将点击项位置移动到中间位置;

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

    您可能感兴趣的文章:

    • 小程序显示弹窗时禁止下层的内容滚动实现方法
    • 微信小程序textarea层级过高(盖住其他元素)问题的解决办法
    • 微信小程序textarea层级过高的解决方法
    • 微信小程序实现弹出层效果
    • 微信小程序自定义tab实现多层tab嵌套功能
    • 微信小程序实现锚点定位楼层跳跃的实例
    • 如何阻止小程序遮罩层下方图层滚动


  • 上一条:
    react+redux仿微信聊天界面
    下一条:
    微信小程序自定义多列选择器使用详解
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • 如何优雅处理async await错误推荐:await-to-js库(0个评论)
    • lodash工具库(0个评论)
    • 在Laravel项目中使用中间件方式统计用户在线时长功能代码示例(0个评论)
    • 在Laravel中构建业务流程模型(0个评论)
    • windows系统中安装FFMpeg及在phpstudy环境php7.3 + php-ffmpeg扩展的使用流程步骤(0个评论)
    • 在go语言中对浮点的数组、切片(slice)进行正向排序和反向排序(0个评论)
    • 在go语言中对整数数组、切片(slice)进行排序和反向排序(0个评论)
    • 在go语言中对字符串数组、切片(slice)进行排序和反向排序(0个评论)
    • 最新国内免注册ChatGPT体验站_ChatGPT镜像站访问链接地址2023/3/28持续更新(0个评论)
    • 在Laravel项目中的实现无密码认证之:发送邮箱链接授权(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
    • 2023-02
    Top

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

    侯体宗的博客