微信小程序實現卡片層疊滑動
更新時間：2022年05月23日 16:59:36 作者：haicome
這篇文章主要為大家詳細介紹了微信小程序實現卡片層疊滑動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序實現卡片層疊滑動的具體代碼，供大家參考，具體內容如下
實現效果：
1.左右滑動時，向相應方向移動一個卡片位置；
2.點擊某一項時，將點擊項位置移動到中間位置；
代碼如下：
wxml：
<view class="teachers_banner">
? <view class="container clearfix teachers_b">
? ? <view class="slide" id="slide" bindtouchstart='moveStart' bindtouchend='moveItem'>
? ? ? <ul>
? ? ? ? <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}}" alt="林奇涵" title=""></image>
? ? ? ? ? </li>
? ? ? ? </block>
? ? ? </ul>
? ? </view>
? </view>
</view>css：
/* index/gun/jsSwiper2/jsSwiper2.wxss */
/*輪播圖片*/
.teachers_banner{
? ? width:100%;
? ? height:575px;
? ? /* background: url(../images/teachers_banner.jpg) no-repeat center top; */
? ? background-size: cover;
? ? ?position: relative;
? ? overflow: hidden;
}
.teachers_b{
? position:relative;
? margin-top:130px;
}
#slide {
? ? margin: 0 auto;
? ? width: 100%;
? ? height: 330px;
? ? position: relative;
? }
? image{
? ? width: 200rpx;
? ? height: 200rpx;
? }
#slide li {
? ? position: absolute;
? ? width:200rpx;
? ? display: -webkit-box;
? ? display: -webkit-flex;
? ? display: flex;
? ? align-items: flex-start;
? ? -webkit-box-align: flex-start;
? ? -webkit-align-items: flex-start;
? ? background:#fff;
? ? overflow:hidden;
? ? box-shadow: 0 0 20px #1d374d;
}
#slide li img {
? ? width: 100%;
? ? height: 100%;
}
.slide_left{
?/* width:240px;*/
}
.slide_right{
?/* width:440px;*/
? padding: 40px;
? -webkit-box-flex: 1;
? ? -webkit-flex: 1;
? ? flex: 1;
? ? min-width: 0;
}
.slide_right h3{
font: 400 30px/18px "Microsoft Yahei";
color:#222222;
}
.slide_right h3 span{
? display:inline-block;
? margin-left:10px;
? font: 400 14px/36px "Microsoft Yahei";
color:#555555;
}
.slide_right p{
? padding:20px 0 30px;
? color:#555555;
? ? font: 400 14px/24px "Microsoft Yahei";
? ? border-bottom: 1px solid #dbdbdb;
}
.slide_right dl{
? padding-top:30px;
}
.slide_right dd{
? float: left;
? width:33.3%;
? ?color:#777;
? ? font: 400 12px/24px "Microsoft Yahei";
}
.slide_right dd h3{
color:#ff9000;
margin-bottom:20px;
}
.arrow {
? ?/* display: none;*/
}
.arrow .prev,
.arrow .next {
? ? position: absolute;
? ? width: 64px;
? ? top: 38%;
? ? z-index: 9;
? ? font: 700 96px 'simsun';
? ? opacity: 0.3;
? ? color: #fff;
? ? cursor: pointer;
}
.arrow .prev {
? ? /* left: -220px; */
}
.arrow .next {
? ? /* right: -220px; */
}
.arrow .prev:hover,
.arrow .next:hover {
? ? color: #00a0e9;
? ? opacity: .7;
}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/teacher01.jpg",
? ? ? ? animation: null
? ? ? },
? ? ? {
? ? ? ? id: 2,
? ? ? ? zIndex: 4,
? ? ? ? opacity: 0.4,
? ? ? ? left: 80,
? ? ? ? iamge: "../images/teacher02.jpg",
? ? ? ? animation: null
? ? ? },
? ? ? {
? ? ? ? id: 3,
? ? ? ? zIndex: 6,
? ? ? ? opacity: 0.6,
? ? ? ? left: 120,
? ? ? ? iamge: "../images/teacher03.jpg",
? ? ? ? animation: null
? ? ? },
? ? ? {
? ? ? ? id: 4,
? ? ? ? zIndex: 8,
? ? ? ? opacity:1,
? ? ? ? left: 160,
? ? ? ? iamge: "../images/teacher04.jpg",
? ? ? ? animation: null
? ? ? },
? ? ? {
? ? ? ? id: 5,
? ? ? ? zIndex: 6,
? ? ? ? opacity: 0.6,
? ? ? ? left: 200,
? ? ? ? iamge: "../images/teacher05.jpg",
? ? ? ? animation: null
? ? ? },
? ? ? {
? ? ? ? id: 6,
? ? ? ? zIndex: 4,
? ? ? ? opacity: 0.4,
? ? ? ? left: 240,
? ? ? ? iamge: "../images/teacher06.jpg",
? ? ? ? animation: null
? ? ? },
? ? ? {
? ? ? ? id: 7,
? ? ? ? zIndex: 2,
? ? ? ? opacity: 0.2,
? ? ? ? left: 280,
? ? ? ? iamge: "../images/7.jpg",
? ? ? ? animation: null
? ? ? },
? ? ],
? ? order: []
? },
? /**
? ?* 生命周期函數--監(jiān)聽頁面加載
? ?*/
? onLoad: function(options) {
? ? this.__set__();
? ? this.move();
? },
? /**
? ?* 生命周期函數--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function() {
? },
? /**
? ?* 生命周期函數--監(jiān)聽頁面顯示
? ?*/
? onShow: function() {
? },
? /**
? ?* 生命周期函數--監(jiān)聽頁面隱藏
? ?*/
? onHide: function() {
? },
? /**
? ?* 生命周期函數--監(jiān)聽頁面卸載
? ?*/
? onUnload: function() {
? },
? /**
? ?* 頁面相關事件處理函數--監(jiān)聽用戶下拉動作
? ?*/
? 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
? ? ? })
? ? }
? },
? //手指觸發(fā)開始移動
? moveStart: function (e) {
? ? console.log(e);
? ? var startX = e.changedTouches[0].pageX;
? ? this.setData({
? ? ? startX: startX
? ? });
? },
? //手指觸摸后移動完成觸發(fā)事件
? 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();
? ? }
? },
})
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JS中作用域以及變量范圍分析,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了js 計數排序的實現示例(升級版),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
這篇文章主要介紹了JavaScript判斷前綴、后綴是否是空格的方法,涉及javascript操作字符串的正則替換、判斷與屬性操作技巧,需要的朋友可以參考下2015-04-04
今天小編就為大家分享一篇layui使用表格渲染獲取行數據的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了原生Javascript和jQuery做輪播圖簡單例子,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了el-dialog對話框子組件的關閉方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
近期在寫一個博客管理后臺的前端,涉及在同一頁面兩種高亮顯示當前菜單的需求.2010-06-06
這篇文章主要為大家分享了Bootstrap作品展示站點實戰(zhàn)項目，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
用Javascript評估用戶輸入密碼的強度實現代碼，需要的朋友可以參考下。2011-11-11
這篇文章主要介紹了webpack常用配置總覽(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11