小程序加骨架屏整理及其他问题记录

最新推荐文章于 2024-07-20 10:31:03 发布

老酒馆的猫

最新推荐文章于 2024-07-20 10:31:03 发布

阅读量303

点赞数

分类专栏：小程序文章标签：小程序 javascript

本文链接：https://blog.csdn.net/oldpubcat/article/details/114087729

版权

本文记录了小程序开发中遇到的问题，包括换行处理、动态头部实现、骨架屏的制作、导航栏角标设置、版本更新检测、用户信息获取、服务号通知、canvas使用注意事项、图片加载状态判断、用户信息展示以及遵循的小程序开发规范。

摘要由CSDN通过智能技术生成

记录一下小程序开发工作中遇到的问题，想到什么记什么

1、换行

只有在<text></text>里才支持回车符换行，<view></view>里面不支持。

2、动态头部

在自定义界面自定义的头部在下滑的时候会划走，需要自定义一个固定在头部的头部，直接显示不太好，加了点动画，记录一下代码

需要根据滚动做判断，所以需要把页面的代码都放到scroll-view里面，scroll-view做父级元素包裹所有代码。

<view>
  <scroll-view bindscroll="scroll" scroll-y class="scrollBox" scroll-top="{
    {scrollTop}}">
    <!-- 其他HTML代码 -->
  </scroll-view>
</view>

样式，scroll-view需要屏幕高度，然后进行滚动

.scrollBox{
   
  height: calc(100vh - 120rpx);
  width: 100%;
}

js里面需要判断任务栏的高度，和做判断，加动画

Page({
   
  data: {
   
    h: 0, // height
    isbig: true, //做节流
    isLittle: true, // 滚动节流
    scrollTop: 0,
    opacity:0,
    animationOpacity: null, //动画实例
  },
  onShow: function () {
   
    let h = app.globalData.navHeight;
    let top = this.data.top;
    if (top > 50) {
   
      this.setData({
    opacity: 1 });
    } else {
   
      this.setData({
    opacity: 0 });
    }
    this.setData({
    h: h });
  },
  // 滚动
  scroll(e) {
   
    var top = e.detail.scrollTop;
    this.setData({
    top: top });
    if (e.detail.scrollTop > 20) {
   
      this.setData({
    isLittle: true });
      if (this.data.isbig) {
   
        this.setData({
    isbig: false });
        var animation = wx.createAnimation({
   
          duration: 650,
          timingFunction: 'ease-in'
        })
        animation.opacity(1).step();
        this.setData({
    animationOpacity: animation.export() });
      }
    } else {
   
      this.setData({
    isbig: true });

      if (this.data.isLittle) {
   
        this.setData({
    isLittle: false });
        var animation = wx.createAnimation({
   
          duration: 650,
          timingFunction: 'ease-out'
        })
        animation.opacity(0).step();
        this.setData({
    animationOpacity: animation.export() })