小程序踩坑记录

scroll-view

1. scroll-view组件中的scrollTop属性设置后自己滚动，建议使用wx.pageScrollTo（注意：scrollPageTo的滚动无法打断，可以在滚动时添加loading遮罩层避免用户无效操作）；
2. 下拉刷新与容器的下拉刷新冲突
3. 禁止用户滚动scroll-view

   // 在scroll-view被被加载时就设置，否则会有兼容问题
      wx.createSelectorQuery()
        .in(this)
        .select("#scrollview")
        .node()
        .exec((res) => {
          const scrollView = res[0].node;
          // 取消滚动
          scrollView.scrollEnabled= false;
          // 取消ios的边界回弹
          scrollView.bounces = false;
          // 取消滚动惯性
          scrollView.decelerationDisabled = true;
        });
   

4. scroll-view自动滚动

  /**
  * 设置一个自动滚动的定时器，间隔为10，在未滚动到右边时每10s更新一下scroll-view的scroll-left，
  * 建议在scroll-view自动滚动的时候，在scroll-view上面覆盖一个透明的mask，让用户无法操作到scroll-view
  * 当点击mask时，停止自动滚动，监听scroll-view滚动到右边时，停止滚动
  */
  autoScroll() {
    const self = this;
    // scrollWidth是在数据加载完后获取到的scroll-view的实际宽度
    const { isAutoScroll, scrollWidth, windowWidth, vScrollLeft } = self.data;
    if (!isAutoScroll) return;
    // 是否滚动到了最右边
    if (vScrollLeft < scrollWidth - windowWidth) {
      self.clearTimer();
      self.timer = setTimeout(() => {
        const _vScrollLeft = Number(vScrollLeft) + 1;
        self.setData({
          scrollLeft: _vScrollLeft,
          vScrollLeft: _vScrollLeft,
        });
        self.autoScroll();
      }, 10);
    } else {
      self.stopScroll();
    }
  },
  // 停止滚动
  stopScroll() {
    const self = this;
    const { vScrollLeft, scrollWidth, windowWidth } = self.data;
    self.clearTimer();
    self.setData({
      isAutoScroll: false,
      reachLeft: vScrollLeft >= scrollWidth - windowWidth,
    });
    wx.createSelectorQuery()
      .in(self)
      .select("#scrollview")
      .node()
      .exec((res) => {
        const scrollView = res[0].node;
        scrollView.scrollEnabled = true;
      });
  },
  onReachLeft() {
    const sys = wx.getSystemInfoSync();
    this.setData({ windowWidth: sys.windowWidth }, () => {
      this.stopScroll();
    });
  },

WXML

<scroll-view id="scrollview" class="scroll-container" scroll-x scroll-left="{{scrollLeft}}" bindscroll="onScroll" enhanced bounces="{{false}}" show-scrollbar="{{false}}" bindscrolltolower="onReachLeft" lower-threshold="1" throttle="{{false}}">

媒体组件：Images

1. 图片拼接有白边：

   .img{
       display: inline-block;
       margin-top: -1px;
   }
   

2. 图片底部有留白：

   .img{
       display: flex;
   }
   

view

1. 多行显示在不同的设备中，特别是android7中会出现下一行展示了一部分边边的问题：

   .title{
       max-height: 40px;
       line-height: 20px;
       font-size: 14px;
       // 下方是多行显示的css代码
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       line-clamp: 2;
       -webkit-box-orient: vertical;
       word-break: break-all;
   }
   

   max-height与line-height会解决这个问题

innerAudioContex

1. innerAudioContex在ios的静音模式下使用setInnerAudioOption设置不跟随ios的静音模式

    wx.setInnerAudioOption({
            obeyMuteSwitch: false,
            complete: (res) => {
            console.log("设置成功", res);
            },
    });
    // 注意在createInnerAudioContext不能使用useWebAudioImplement，否则无效

2. 使用innerAudioContex播放的音频资源路径应该是绝对路径，相对路径无效