小程序简单翻页效果

- 日理万妓 2022-05-08 03:54 768阅读 0赞

做了一个简单的翻页效果，可以参考修正一下，自己也可以优化代码。我写的是超级最初版。

.main{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: auto;
    
    }
    .main .one,.main .two{
      width: 50%;
      height: 100%;
      background-color: white;
    }
    .two{
      position: relative;
    }
    
    .cent{
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 900;
      font-size: 8em;
      position: absolute;
      top: 0;
      left: 0;
      background-color: red;
      width: 100%;
    }
    .sta ,.clo{
    transform-style: preserve-3d;
      perspective: 400;
      
      transition: all 0.3s ease-in-out;
    }
    
    .sta{
      transform-origin:0% 50%;
      transform: rotateX(0deg) rotateY(-160deg) rotateZ(0deg);
    }
    .clo{
      transform-origin:0% 50%;
      transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    .z1{
      z-index:1
    }
    .z2{
      z-index:2
    }
    .z3{
      z-index:3
    }

// pages/tx/tx27.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        list:[
          {name:"A",isof:false,zind:3},
          { name: "B", isof: false ,zind:1},
          { name: "C", isof: false ,zind:1},
          { name: "D", isof: false ,zind:1},
          ],
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      setclass:function(e){
        console.log(e.target.dataset.index);
        let that = this;
        let list = that.data.list;
        
        let n = e.target.dataset.index;
        for(let i = 0; i < list.length; i++){
          if(n == i){
            list[i].isof = !list[i].isof;
            list[i].zind = 3;
            
          }else{
            list[i].zind = 1;
          }
        }
        if (n - 1 >= 0) {
          list[n - 1].zind = 2;
        }
        if (n + 1 < list.length) {
          list[n + 1].zind = 2;
        }
        that.setData({
          list : list
        })
    
    
      },
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })