小程序切换下一个文章或者页面,淡入淡出效果
// detail.js
getArticleData: function(articleId) {
// 开始淡出效果
this.animate('.detail-page', [
{ opacity: 1.0, ease: 'ease-out' },
{ opacity: 0.0, ease: 'ease-out' }
], 500, () => {
// 在淡出动画完成后请求文章数据
wx.request({
url: `${apiBaseUrl}/articles/${articleId}`,
method: 'GET',
success: (res) => {
if (res.data.status === 0) {
const data = res.data.data;
const articleData = data.current_article;
// 更新文章数据
this.setData({
title: articleData.title,
htmlContent: articleData.content,
nextArticleId: data.next_article_id,
previousArticleId: data.previous_article_id,
});
// 开始淡入效果
this.animate('.detail-page', [
{ opacity: 0.0, ease: 'ease-in' },
{ opacity: 1.0, ease: 'ease-in' }
], 500);
} else {
// 错误处理
console.error('获取文章数据失败:', res.data.message);
}
},
fail: (err) => {
console.error('请求文章数据失败:', err);
}
});
});
}
小程序滚动加载上一页或者下一页,滚动条不回顶部的问题
尝试了各种方案效果不是很理想,最终直接采用跳转的方案
wx.redirectTo({
url: '/pages/index/detail?id=' + this.data.previousArticleId
});
图片高度不能自适应宽度的问题
<image class="card-image" src="{{item.cover_image}}" mode="aspectFill"></image>
<image class="card-image" src="{{item.cover_image}}" mode="widthFix"></image>
主要问题在于mode,这里有多种模式,aspectFill这种就是显示中间一块
widthFix则是自适应宽高