微信小程序swiper实现句子控app首页滑动卡片

引言：最近看到句子控APP首页的效果很清新，可是发现他的微信小程序端没有实现这个功能，我看了一下难度不大，于是尝试着去实现。

实现效果如下：

1、定义一个yiyancard自定义组件，在根目录下新建一个components文件夹并在其内部新建一个yiyancard文件夹。

2、在pages文件夹下新建一个home页面

3、在home页面的json引入yiyancard组件，并在wxml中使用

index.json

{

"usingComponents": {

"s-yiyancard": "../../components/yiyancard/index"
}

}

index.wxml

4、编写yiyancard相关代码

index.js

Page({
data: {
cardCur: 0,

swiperList: [{

id: 0,

type: 'image',

url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/6.JPG?sign=39d14c3902ca802c5bbdca9487c4dfc8&t=1612537023',

yiyan: '没有无聊的人生，只有无聊的人生态度',

form: '刘瑜',

iflike: "false"

}, {

id: 1,

type: 'image',

url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/1.JPG?sign=6a578b89d06a74141a01b35b26684e04&t=1612536951',

yiyan: '没有任何一种逃避能得到赞赏，喜欢就去追，饿了就吃饭，管他是失败或是发胖',

form: '',

iflike: "false"

}, {

id: 2,

type: 'image',

url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/2.JPG?sign=42c68e97e5fcd277e42bdc476a94cdb4&t=1612536964',

yiyan: '万物皆有裂痕，那是光进来的地方',

iflike: "false"
}, {

id: 3,

type: 'image',

url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/3.JPG?sign=d607ee45937f227f8ae5fba4e9f846f4&t=1612536974',

yiyan: '不听命于自己者，就要受命于他人',
form: '尼采',

iflike: "false"

}, {

id: 4,

type: 'image',

url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/4.JPG?sign=4c986f27559352bb5d9b42a96851ab22&t=1612536983',

yiyan: '我从不曾崩溃瓦解，因为我从不曾完好无缺',
form: '安迪·沃霍尔',

iflike: "false"

}, {

id: 5,

type: 'image',

url: 'https://7368-shuyuabn-9gke6t6k962d48ca-1304045188.tcb.qcloud.la/image/5.JPG?sign=22d43fff1c66594770c1c2b10cd8403c&t=1612537004',

yiyan: '总有人找你这可小星球，了解你的温柔和璀璨，即使旁边的宇宙再浪漫',
form: '',

iflike: "false"

}, {

ifend: true

}],

},

onLoad() {

this.towerSwiper('swiperList');

// 初始化towerSwiper 传已有的数组名即可

},

DotStyle(e) {

this.setData({

DotStyle: e.detail.value

})

},

// cardSwiper

cardSwiper(e) {

this.setData({

cardCur: e.detail.current

})

},

// towerSwiper

// 初始化towerSwiper

towerSwiper(name) {

let list = this.data[name];

for (let i = 0; i
list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))

list[i].mLeft = i - parseInt(list.length / 2)

}

this.setData({

swiperList: list

})

},

// towerSwiper触摸开始

towerStart(e) {

this.setData({

towerStart: e.touches[0].pageX

})

},

// towerSwiper计算方向

towerMove(e) {

this.setData({

direction: e.touches[0].pageX - this.data.towerStart > 0 ? 'right' : 'left'

})

},

// towerSwiper计算滚动

towerEnd(e) {

let direction = this.data.direction;

let list = this.data.swiperList;

if (direction == 'right') {

let mLeft = list[0].mLeft;

let zIndex = list[0].zIndex;

for (let i = 1; i
list[i - 1].mLeft = list[i].mLeft

list[i - 1].zIndex = list[i].zIndex

}

list[list.length - 1].mLeft = mLeft;

list[list.length - 1].zIndex = zIndex;

this.setData({

swiperList: list

})

} else {

let mLeft = list[list.length - 1].mLeft;

let zIndex = list[list.length - 1].zIndex;

for (let i = list.length - 1; i > 0; i--) {

list[i].mLeft = list[i - 1].mLeft

list[i].zIndex = list[i - 1].zIndex

}

list[0].mLeft = mLeft;

list[0].zIndex = zIndex;

this.setData({

swiperList: list

})

}

},
// 喜欢图标点击改变

like: function (event) {

const that = this

let likeid = event.currentTarget.dataset.likeid

var a = `swiperList[${likeid}].iflike`

var b =`that.data.swiperList[${likeid}].iflike`

console.log(a)

console.log(b)
if (that.data.swiperList[likeid].iflike=== "false") {

that.setData({

[a] : "true",

})

} else if (that.data.swiperList[likeid].iflike=== "true") {

that.setData({

[a]: "false",

})

}
console.log(that.data.swiperList[likeid].iflike)

}

})

index.json

{

"component": true,

"usingComponents": {}

}

{{item.yiyan}}

- {{item.form}} -



















12k







36

























每日十句精选投稿



感谢支持，每天都有不同的收获。如果意犹未尽，可以点击底部按钮查看更多推荐



去发现页查看更多推荐

index.css

/* ==================

轮播

==================== */
.swiper-img {

height: 35% !important;
}
.swiper-item image,

.swiper-item video {

width: 100%;

display: block;

height: 100%;

margin: 0;

pointer-events: none;

}
.card-swiper {
height: 85vh !important;

}
.card-swiper swiper-item {

width: 610rpx !important;

left: 70rpx;

box-sizing: border-box;

padding: 40rpx 0rpx 70rpx;

overflow: initial;

}
.card-swiper swiper-item .swiper-item {

width: 100%;

display: block;

height: 100%;

border-radius: 10rpx;

transform: scale(0.9);

transition: all 0.2s ease-in 0s;

overflow: hidden;

}
.card-swiper swiper-item.cur .swiper-item {

transform: none;

transition: all 0.2s ease-in 0s;

}
swiper {

margin-top: 15rpx !important;

}
.other {

position: relative;
background-color: #ffffff;

display: flex;

/*flex布局方法*/

flex-direction: column;

/*垂直布局*/

align-items: center;

/*水平方向居中*/
box-shadow: 0 6rpx 24rpx rgba(0, 0, 0, 0.08);

position: relative;
}
/* 内容 */

.yiyan-body {

line-height: 46rpx;

letter-spacing: 5rpx;

margin-top: 38rpx;

font-size: 30rpx;

width: 90%;

height: 35%;

margin-left: 5%;

color: #3e3e3e;

}
.yiyan-form {

position: absolute;

bottom: 55px;

display: flex;

flex-direction: column;

align-items: center;

font-size: 25rpx;

color: #999999;

width: 50%;

margin-top: 20%;

margin-left: 25%;
}
/* 底部 */

.bottom-box {

position: absolute;

bottom: 0px;

width: 100%;

height: 80rpx;

display: flex;

flex-direction: row;

}
.juzhong {

display: flex;

justify-content: center;

align-items: center;
}
.icon-img {

width: 30rpx !important;

height: 30rpx !important;

}
.icon-img2 {

width: 30rpx !important;

height: 30rpx !important;

/* margin-top: 5rpx !important; */

}
.like {

display: flex;

justify-content: center;

align-items: center;

width: 27%;

}
.num {

font-size: smaller;

margin-top: 3rpx;

margin-left: 6rpx;

color: #b4b4b4;

}
.liuyan {

width: 27%;

display: flex;

justify-content: center;
align-items: center;

}
.biaoqian {

width: 23%;

display: flex;

justify-content: center;
align-items: center;

}
.zhuanfa {

width: 23%;

display: flex;

justify-content: center;
align-items: center;

}

/* 最后一页 */

.end-title{

width: 60%;

margin-left: 20%;

font-size: 30rpx;

display: flex;

justify-content: center;

align-items: center;

margin-top: 100rpx;

margin-bottom: 100rpx;

}

.end-body{

width: 80%;

margin-left: 10%;

font-size: 27rpx;

color: #a7a7a7;

display: flex;

justify-content: center;

align-items: center;

margin-bottom: 40rpx;

}

.end-bottom{

position: absolute;

width: 70%;

left: 15%;

bottom: 60rpx;

display: flex;

justify-content: center;

align-items: center;

margin-bottom: 40rpx;

color: #7b9fcb;

font-size: 28rpx;

}

编写完以上代码，相关功能就实现了。

注意：为了方便以上data中的数据是直接在js中自定义好的。

微信小程序swiper实现 句子控app首页滑动卡片的相关教程结束。