帮我生成微信小程序仿探探的发现页面从后端获取信息的代码
时间: 2024-04-03 18:31:31 浏览: 10
好的,以下是一个简单的微信小程序仿探探的发现页面从后端获取信息的代码示例:
```
// pages/discovery/discovery.js
Page({
data: {
cards: [], // 卡片列表
startX: 0, // 手指触摸起始坐标
startY: 0, // 手指触摸起始坐标
currentIndex: 0 // 当前卡片的索引
},
onLoad: function () {
// 从后端获取卡片列表数据
wx.request({
url: 'https://your-backend-url.com/get-cards',
success: res => {
this.setData({
cards: res.data
});
},
fail: () => {
wx.showToast({
title: '获取卡片列表失败',
icon: 'none'
});
}
});
},
// 手指触摸开始事件
touchStart: function (e) {
this.setData({
startX: e.changedTouches[0].clientX,
startY: e.changedTouches[0].clientY
})
},
// 手指触摸结束事件
touchEnd: function (e) {
var endX = e.changedTouches[0].clientX;
var endY = e.changedTouches[0].clientY;
var startX = this.data.startX;
var startY = this.data.startY;
var currentIndex = this.data.currentIndex;
var cards = this.data.cards;
// 判断手指滑动方向
var direction = this.getDirection(startX, startY, endX, endY);
if (direction == 0) {
// 未滑动
return;
} else if (direction == 1) {
// 向上滑动
currentIndex++;
if (currentIndex >= cards.length) {
// 已经到最后一张卡片,重新开始
currentIndex = 0;
}
} else if (direction == 2) {
// 向下滑动
currentIndex--;
if (currentIndex < 0) {
// 已经到第一张卡片,从最后一张卡片开始
currentIndex = cards.length - 1;
}
}
// 更新当前卡片索引
this.setData({
currentIndex: currentIndex
});
},
// 获取手指滑动方向
getDirection: function (startX, startY, endX, endY) {
var dy = startY - endY;
var dx = endX - startX;
var angle = Math.abs(Math.atan2(dy, dx) * 180 / Math.PI);
if (angle <= 45) {
return dx > 0 ? 1 : 2; // 向左或向右滑动
} else if (angle >= 135) {
return dy > 0 ? 3 : 4; // 向上或向下滑动
} else {
return 0; // 未滑动
}
}
})
```
这段代码演示了如何从后端获取卡片列表数据,并将其存储在卡片列表中。在实际应用中,你需要根据数据结构来修改代码,以确保正确地获取并解析数据。同时,你还需要根据设计要求进行样式调整,以保证页面的外观与探探类似。