小程序切换下一个文章或者页面,淡入淡出效果
// 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则是自适应宽高
头像获取问题
现在头像已经不支持点击获取了,也就说下面两种方式都失效了
getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹窗wx.getUserProfile({desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写success: (res) => {console.log(res)this.setData({userInfo: res.userInfo,hasUserInfo: true})}})},getUserInfo(e) {// 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息console.log(e)this.setData({userInfo: e.detail.userInfo,hasUserInfo: true})}
现在采用的方式为用户设置的方式。具体文档见:微信文档
相关代码
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"><image class="avatar" src="{{avatarUrl}}"></image>
</button>
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'Page({data: {avatarUrl: defaultAvatarUrl,},onChooseAvatar(e) {const { avatarUrl } = e.detail this.setData({avatarUrl,})}
})