微信小程序实现3D轮播图效果(非swiper组件)


Posted in Javascript onSeptember 21, 2019

本文实例为大家分享了微信小程序实现3D轮播图效果的具体代码,供大家参考,具体内容如下

首先上一下效果图:

微信小程序实现3D轮播图效果(非swiper组件)

 在做的时候首先想到的是用swiper组件但是发现swiper组件放进去图片的时候会没有3d的效果,原因是swiper组件自带的style属性限制了3d效果所需要的属性,所以单独写了一个组件。

index.html

<view class='page-con'>
  rotate.wxml
  <view class='stage'>
    <view class='wrapper' bindtouchstart='start' bindtouchend='end'>
      <block wx:for='{{swiperList}}'>
        <image class='imgBasic {{index === 0 ? "" : "fold"}} {{item.active ? item.swpClass : ""}}' src='{{item.imgsrc}}' data-index='{{index}}'></image>
      </block>
    </view>
    <view class='dots'>
      <block wx:for='{{swiperList}}' wx:key='unique'>
        <view data-i='{{index}}' bindtap='fn' class='dot {{index === currentImageIndex ? "active" : ""}}'></view>
      </block>
    </view>
  </view>
</view>

index.css:

.stage{
  perspective: 3000rpx;
  perspective-origin: 50% 50%;
  border: 2rpx solid rgba(0, 0, 0, 0.5);
  padding: 20rpx 28rpx;
  background: rgba(255, 255, 255,0.8);
  height: 520rpx;
}
.wrapper{
  height:480rpx;
  margin-top: 20rpx;
  transform-style: preserve-3d;
  position: relative;
}
.imgBasic{
  position: absolute;
  width:480rpx;
  height:480rpx;
  border-radius:10rpx;
  border: 7rpx solid #fff;
}
image:nth-child(1){
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
image:nth-child(2){
  left: 260rpx;
}
image:nth-child(3){
  left: 320rpx;
}
image:nth-child(4){
  left: 380rpx;
}
.fold{
  transform: rotateY(-80deg) scale3d(1,0.85,1) translateZ(-10%);
  -webkit-transform: rotateY(-80deg) scale3d(1,0.85,1);
  background: rgba(255, 255, 255,0.8);
}
 
.swiper-con{
  height: 520rpx;
}
.scrollCon{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  background: red;
}
.itemParent{
  position: relative;
  width: 100%;
  height: 1000rpx;
}
.item{
  width: 100rpx;
  float: left;
  height: 100rpx;
}
.item-con{
  height:500rpx;
}
swiper-item{
  width:480rpx;
  height:480rpx;
}
 
.idx-content {
 perspective: 1500;
}
.idx-content .idx-swiper {
 position: relative;
 margin: 40rpx 0;
 padding-bottom: 100%;
 transform-style: preserve-3d;
}
.idx-content .idx-swiper .idx-cswp {
 width: 70%;
 height: 100%;
 position: absolute;
 transform-style: preserve-3d;
 top: 0;
 border-radius: 6px;
}
.idx-content .idx-swiper .idx-cswp image {
 width: 100%;
 max-height: 600rpx;
}
.idx-content .idx-swiper .idx-cswp .swp-title .swp-btime {
 text-align: center;
 font-size: 28rpx;
}
.idx-content .idx-swiper .idx-cswp .swp-title .swp-bname {
 text-align: center;
 font-size: 24rpx;
}
/*
  右边的图片展开动画效果
*/
@keyframes rotateImage{
  from{
    transform:rotateY(-80deg);
    -webkit-transform:rotateY(-80deg);
    left: 250rpx;
  }
  to{
    transform: rotateY(0deg) scale3d(1,1,1);
    -webkit-transform: rotateY(0deg) scale3d(1,1,1);
    left: 0rpx;
  }
}
@keyframes backRotateImage{
  from{
    transform: roateteY(0deg) scale3d(1,1,1);
    -webkit-animation: rotateY(0deg) scale3d(1,1,1);
    filter: contrast(100%) brightness(100%);
  }
  to{
    transform: rotateY(280deg) scale3d(1,0.85,1);
    -webkit-animation: rotateY(280deg) scale3d(1,0.85,1);
    left: 210rpx;
  }
}
@keyframes leftMoveAnimation{
  from{
    /* transform:translateX(-300rpx); */
    /* left: 260rpx; */
  }to{
    transform:translateX(-40%) scale3d(1,0.85,1) rotateY(-80deg);
    -webkit-transform:translateX(-40%) scale3d(1,0.85,1) rotateY(-80deg);
  }
}
@keyframes leftMove2Animation{
  from{
    
  }to{
    transform:translateX(-35%) scale3d(1,0.85,1) rotateY(-80deg);
    -webkit-transform:translateX(-35%) scale3d(1,0.85,1) rotateY(-80deg);
  }
}
/*
  功能介绍:向左边展开,放大,位移操作
*/
.swp-left {
 animation: rotateImage 1s normal;
 -webkit-animation: rotateImage 1s normal;
 animation-iteration-count:1;
 animation-fill-mode: forwards;
 transform-origin: right;
 backface-visibility: hidden;
}
/*
  功能介绍:单独从左侧位移到屏幕的最后侧位置并且播放折叠动画
*/
.swp-right {
  animation: backRotateImage 1s normal;
  -webkit-animation: backRotateImage 1s normal;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  transform-origin: right;
  backface-visibility: hidden;
}
/*
 右边的动画依次向左移动,放大,旋转操作
*/
.move-left1{
  transform:rotateY(-80deg) scale3d(1,0.85,1);
  animation: leftMoveAnimation 1s normal;
  -webkit-animation: leftMoveAnimation 1s normal;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  transform-origin: right;
  backface-visibility: hidden;
}
.move-left2{
  transform:rotateY(-80deg) scale3d(1,0.85,1);
  animation: leftMove2Animation 1s normal;
  -webkit-animation: leftMove2Animation 1s normal;
  animation-iteration-count:1;
  animation-fill-mode: forwards;
  transform-origin: right;
  backface-visibility: hidden;
}
.dots{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  margin: 0 8rpx;
  position: absolute;
  left: 0rpx;
  right: 0rpx;
  bottom: 15rpx;
}
.dot{
  margin: 0 8rpx;
  height: 15rpx;
  width: 15rpx;
  background: #da91f5;
  border-radius: 15rpx;
}
.active{
  width: 40rpx;
  height: 15rpx;
  border-radius: 15rpx;
}

控制层index.js:

// pages/lck/testJing/perfact.js
let app = getApp();
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    host: app.host,
    dkheight: 300,
    dkcontent: `你好<br/>nihao,<br/><br/><br/><br/><br/><br/><br/>这个是测试<br/><br/>你同意了吗<br/><br/><br/>hehe<b class='nihao'>n你好啊,我加粗了kk</b >
   <p><img src='http://shop.ykplay.com/upload/1/App.ico'/><strong>asdfasdfasd</strong></p>`,
    typeValue: null,
    showRightToast: false,
    changeImg: false,
    show: true,
    swiperList: [
      {
        index: 0,
        aurl: "../start/start",
        swpClass: "swp-left",
        active: false,
        imgsrc: "../../resources/test.png",
      },
      {
        index: 1,
        aurl: "#",
        swpClass: "swp-right",
        active: false,
        imgsrc: "../../resources/800.jpg"
      },
      {
        index: 2,
        aurl: "#",
        swpClass: "swp-right",
        active: false,
        imgsrc: "../../resources/900.jpg"
      },
      {
        index: 3,
        aurl: "#",
        swpClass: "swp-right",
        active: false,
        imgsrc: "../../resources/1000.jpg"
      }],
    played: false,
    //滑动触点开始的时候
    startPoint: 0,
    currentImageIndex: 0
 
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.data.typeValue = {};
    this.data.typeValue.size = 'M';
    this.data.typeValue.color = 'red';
    console.log("typeValue is ", this.data.typeValue);
    this.setData({
      typeValue: this.data.typeValue
    })
    let winPage = this;
    wx.getSystemInfo({
      success: function (res) {
        let winHeight = res.windowHeight;
        console.log(winHeight);
        winPage.setData({
          dkheight: winHeight - winHeight * 0.05 - 80
        })
      }
    })
 
    wxParse.wxParse('dkcontent', 'html', this.data.dkcontent, this, 5);
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //  wx.hideLoading();
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  },
  previewImage: function (e) {
    var that = this,
      //获取当前图片的下表
      index = e.currentTarget.dataset.index,
      //数据源
      pictures = this.data.pictures;
    wx.previewImage({
      //当前显示下表
      current: pictures[index],
      //数据源
      urls: pictures
    })
  },
  onShareAppMessage: function (ops) {
    
  },
 
  show: function (event) {
    this.setData({
      show: true
    })
  },
  back: function () {
    this.setData({
      show: false
    })
  },
  //显示求换按钮
  swpBtn: function (event) {
    let swp = this.data.swiperList;
    let max = swp.length;
    let dataSet = event.currentTarget.dataset;
    let idx = dataSet.index;
    console.log("idx is ", idx);
    let prev = swp[idx - 1];
    let curView = swp[idx];
    let next = swp[idx + 1];
    console.log("prev is ", prev);
    console.log("curView is ", curView);
    for (let j = 0; j < max; j++) {
      swp[j].active = true;
    }
    if (idx == 1 && prev && next) {
      prev.swpClass = 'swp-right';
      curView.swpClass = 'swp-left';
      console.log("curView.index is ", curView.index);
      for (let i = 2; i < max; i++) {
        if (i === 2) {
          swp[i].swpClass = 'move-left1';
        } else if (i === 3) {
          swp[i].swpClass = 'move-left2';
        }
      }
      let self = this;
      this.setData({
        swiperList: swp
      }, () => {
        console.log("外层的setData被调用");
        //将数组中的第一个元素删除放到最后的位置
        let first = swp.shift();
        swp.push(first);
        console.log("swp is ", swp);
        self.data.swiperList = swp;
        self.setData({
          swiperList: swp
        }, () => {
          console.log("最内层的setData被调用");
        })
      })
    }
  },
  start: function (e) {
    console.log("e is ", e);
    this.data.startPoint = e.changedTouches[0].pageX;
    console.log("startPoint is ", this.data.startPoint);
  },
  end: function (e) {
    let isLeft = false;
    let isRight = false;
    console.log("e is ", e);
    console.log("endPoint is ", e.changedTouches[0].pageX);
    let endPoint = e.changedTouches[0].pageX;
    console.log("是否向左移动?", (endPoint - this.data.startPoint) < 0 ? (isLeft = true) : (isRight = true));
    console.log("isLeft is ", isLeft);
    console.log("isRight is ", isRight);
    //如果向左移动的话执行相应方法
    if (isLeft) {
      this.moveLeft(1);
    } else {
      // this.moveRight();
    }
  },
  moveLeft: function (idx) {
    if (idx === 1) {
      let swp = this.data.swiperList;
      let max = swp.length;
      let prev = swp[idx - 1];
      let curView = swp[1];
      let next = swp[idx + 1];
      console.log("prev is ", prev);
      console.log("curView is ", curView);
      for (let j = 0; j < max; j++) {
        swp[j].active = true;
      }
      if (prev && next) {
        prev.swpClass = 'swp-right';
        curView.swpClass = 'swp-left';
        console.log("curView.index is ", curView.index);
        // this.data.currentImageIndex = curView.index;
        this.setData({
          currentImageIndex: curView.index
        })
        for (let i = 2; i < max; i++) {
          if (i === 2) {
            swp[i].swpClass = 'move-left1';
          } else if (i === 3) {
            swp[i].swpClass = 'move-left2';
          }
        }
        let self = this;
        this.setData({
          swiperList: swp
        }, () => {
          console.log("外层的setData被调用");
          //将数组中的第一个元素删除放到最后的位置
          let first = swp.shift();
          swp.push(first);
          console.log("swp is ", swp);
          self.data.swiperList = swp;
          self.setData({
            swiperList: swp
          }, () => {
            console.log("最内层的setData被调用");
          })
        })
      }
    }
  },
  icon: function (e) {
    console.log("e is ", e);
  }
})

源码地址:rotate3d

现在的功能是左滑移动,感兴趣的朋友可以试试右滑移动。

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

Javascript 相关文章推荐
js实现DIV的一些简单控制
Jun 04 Javascript
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
Aug 26 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
jquery中文乱码的多种解决方法
Jun 21 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
Vue生命周期示例详解
Apr 12 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
Vue中的scoped实现原理及穿透方法
May 15 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 #Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 #Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 #Javascript
Vue登录主页动态背景短视频制作
Sep 21 #Javascript
layui table 获取分页 limit的方法
Sep 20 #Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 #Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 #Javascript
You might like
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
php常用的工具开发整理
2019/09/26 PHP
extjs grid设置某列背景颜色和字体颜色的实现方法
2010/09/06 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
jQuery 数据缓存模块进化史详细介绍
2012/11/19 Javascript
js中数组Array的一些常用方法总结
2013/08/12 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
关于Jquery中的事件绑定总结
2016/10/26 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
详解小程序缓存插件(mrc)
2018/08/17 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
50行代码实现贪吃蛇(具体思路及代码)
2013/04/27 Python
python字符串替换的2种方法
2014/11/30 Python
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
python中pivot()函数基础知识点
2021/01/03 Python
教师的实习自我鉴定
2013/12/17 职场文书
母校寄语大全
2014/04/10 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
检讨书范文
2019/04/16 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python
解决Mysql的left join无效及使用的注意事项说明
2021/07/01 MySQL