微信小程序实现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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
使用 Node.js 做 Function Test实现方法
Oct 25 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
vue实现点击展开点击收起效果
Apr 27 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 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 mysql 判断update之后是否更新了的方法
2012/01/10 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
PHP7新功能总结
2019/04/14 PHP
PHP实现倒计时功能
2020/11/16 PHP
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
js变换显示图片的实例
2013/04/16 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
javascript实现数独解法
2015/03/14 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
JavaScript遍历数组和对象的元素简单操作示例
2019/07/09 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
Python实现端口复用实例代码
2014/07/03 Python
python通过线程实现定时器timer的方法
2015/03/16 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
利用canvas实现图片压缩的示例代码
2018/07/17 HTML / CSS
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
刑事辩护授权委托书
2014/09/13 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
python办公自动化之excel的操作
2021/05/23 Python