追求卓越一諾千金

藍藍設計-_|亿彩彩票安卓app,2011年成立||_谎言歌词谐音,主創清華團隊-|-金华职业技术学院邮编,專注軟件和互聯網ui設計開發-|-北京人体模特。擅長企業信息化管理||-云购彩票这个app可信吗、監控||诗恩芙、大數據軟件UIUE谘詢和設計開發服務-搬运工包吃住8000月结。立足UI---重庆歪歌横行,好好學習眠宝,天天進步_|魏一宁 尼坤!


微信小程序之卡片層疊滑動效果

2019-6-26 釋然 前端及開發文章及欣賞


如果您想訂閱本博客內容--nokia pc套件官方下载,每天自動發到您的郵箱中|_反间谍工作的主管单位是, 請點這裏

微信小程序之卡片層疊滑動效果

代碼__-许君浩博客:
js_虞城县教育网:

// index/gun/jsSwiper2/jsSwiper2.js
Page({

  /**
   * 頁麵的初始數據
   */
  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_-|军人 涨工资:

<view class="teachers_banner">
  <view class="container clearfix teachers_b">
    <view class="slide" id="slide" bindtouchstart='moveStart' bindtouchend='moveItem'>

      <block wx:for="{{datas}}">
        <li animation="{{item.animation}}" style="z-index: {{item.zIndex}} ;opacity:{{item.opacity}};" bindtap="choose" data-id="{{item.id}}">
          <image src="{{item.iamge}}"></image>
        </li>
      </block>

    </view>
  </view>
</view>

wxss|-2019年白小姐全年资料:

.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.點擊某一項時|_解放军胸章,將點擊項位置移動到中間位置-_智投彩票;

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司|中博彩票网合法吗,為期望卓越的國內外企業提供卓越的UI界麵設計|-几号上班、BS界麵設計 ||038彩票怎么样、 cs界麵設計 -__乔任梁死亡现场、 ipad界麵設計 |-_灌口二手房、 包裝設計 _|_香港大学集体欺凌、 圖標定製 _撒谎的故事、 用戶體驗 __the face shop腮红、交互設計|-|分水线、網站建設 _|-杨镇一中网、平麵設計服務|_-ap赵信出装顺序。



標簽: 微信小程序之卡片層疊滑動效果 « 都 2019 年了還不懂「設計語言」|保定独立团网?看完這篇你就學會了_-银河巡警加克! | 新經濟品牌如何不用廣告建立品牌_|_至尊彩是合法的吗?»


訂閱Rss