小程序样式问题

飞熊 • 2023年12月12日下午9:02 • 后端漫谈 • 阅读 112

小程序切换下一个文章或者页面，淡入淡出效果

// 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,
    })
  }
})