技術標籤：前端開發javascript小程式網路優化

因為專案需要就寫了個懶載入，因為小程式不可以獲取DOM，所以用下面的寫法，如果各位碼友有更好的辦法歡迎評論。

廢話不多說直接上程式碼

View模組程式碼

<view class="publicView">
  <view class="wxapp_index_view flex " wx:for="{{arrList}}" wx:for-index="index">
    <image class="opcityClass {{array[index] ? 'active' : ''}}"
 
 src="{{array[index] ? arrList[index].image : '/img/giao.jpg'}}"></image>
  </view>
</view>   

Js模組程式碼

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    arrList: [{
        id: 0,
        image: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg'
 

      },
      {
        id: 1,
        image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg'
      }, {
        id: 0,
        image: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg'
      },
      {
        id:
 
 1,
        image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg'
      }, {
        id: 0,
        image: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg'
      },
      {
        id: 1,
        image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg'
      }, {
        id: 0,
        image: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg'
      },
      {
        id: 1,
        image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg'
      }, {
        id: 0,
        image: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg'
      },
      {
        id: 1,
        image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg'
      }, {
        id: 0,
        image: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1089874897,1268118658&fm=26&gp=0.jpg'
      },
      {
        id: 1,
        image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819216937,2118754409&fm=26&gp=0.jpg'
      },
    ],
    array: [false, false, false, false, false, false, false, false, false, false, false, false],
    damoHeight: '150',//demo高度
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
    // 360 = 存放圖片容器的模組 
    let _this = this;
    let arrayRi = _this.data.array;
    console.log(arrayRi)
    let num = Math.ceil(wx.getSystemInfoSync().windowHeight / 360);
    console.log(num);
    for (let i = 0; i < num; i++) {
      arrayRi[i] = true;
    };
    console.log(arrayRi);
    _this.setData({
      array: arrayRi
    })
  },

  // 滾動頁面時觸發該函式
  onPageScroll: function (e) {
    let _this = this;
    var _y = parseInt(e.scrollTop / _this.data.damoHeight);
    _this.data.array[_y + 1] = true;
    _this.setData({
      array: _this.data.array
    }); 
  }
})

Css模組程式碼

.publicView {
  width: 100%;
  height: auto;
  min-height: 1000rpx;
  overflow: hidden;
}

.wxapp_index_view {
  width: 100%;
  height: 360rpx;
  background-color: rgb(238, 235, 235);
  margin-bottom: 20rpx;
}


.active{
  opacity: 1;
  transition: all 3s;
}

.wxapp_index_view image {
  width: 100%;
  height: 100%;
}

.flex {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

先把程式碼給大家粘貼出來，省的大家先看我羅嗦的字，後看我的程式碼，哈哈哈~

執行原理

程式碼都給你了，啥執行原理的~
自己研究去吧，，，，哈哈哈哈 再見~

最終展示結果如下：

原始碼已經放到【碼雲】上了

點選下載

小編從小白一步步成長，點滴記錄，希望可以幫助到有需要的夥伴！！！

不忘初心，加油！！！

歡迎更多大佬在下方給出小編更多的好辦法。

如果幫助到您，記得一鍵三連呢，感謝~