微信小程序轮播组件优化

这一次记录两个问题
微信小程序的轮播组件性能优化的问题:

　　问题出现原因
　　　　当需要轮播的数据量大的时候，比如200张图片或者更多的时候，轮播组件出现明显的卡顿，ios手机强制退出小程序并报错（微信报错）
　　解决思路:

　　一. 自己写轮播组件，可以性能优化，现在加载几张然后出现下一张图就把第一个盒子给删除
　　二. 让轮播组件加载数据变少，只加载三张。当切换图片时让这张图片的上一张和下一张改变。

　　实际执行：

　　在这里我用的是第二种方法，这种方法实现起来相对的时间较少，效率高。
　　代码

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    list: {
      type: Array,
      value: null,
      observer(newValue) {
        this.setData({
          totalCount: newValue.length
        })
      }
    },
    current: {
      type: Number,
      value: -1,
      observer(newValue) {
        let {
          list
        } = this.properties
        let swiperList = [],
          capyList = []
          //这里是做了一些轮播的逻辑
        if (newValue == 0) { //用户点第一张
          swiperList = list.slice(list.length - 1)
          capyList = list.slice(newValue, newValue + 2)
          swiperList.push(...capyList)
          swiperList.forEach((item, index, arr) => {
            switch (index) {
              case 0:
                arr[index] = {
                  url: item,
                  index: list.length - 1
                }
                break;
              case 1:
                arr[index] = {
                  url: item,
                  index: newValue
                }
                break;
              case 2:
                arr[index] = {
                  url: item,
                  index: newValue + 1
                }
                break;
              default:
                break;
            }
          })
        } else if (newValue == (list.length - 1)) { //用户点最后一张
          swiperList = list.slice(newValue - 1)
          capyList = list.slice(0, 1)
          swiperList.push(...capyList)
          swiperList.forEach((item, index, arr) => {
            switch (index) {
              case 0:
                arr[index] = {
                  url: item,
                  index: newValue - 1
                }
                break;
              case 1:
                arr[index] = {
                  url: item,
                  index: newValue
                }
                break;
              case 2:
                arr[index] = {
                  url: item,
                  index: 0
                }
                break;
              default:
                break;
            }
          })
        } else { //用户点中间
          swiperList = list.slice(newValue - 1, newValue + 2)
          swiperList.forEach((item, index, arr) => {
            switch (index) {
              case 0:
                arr[index] = {
                  url: item,
                  index: newValue - 1
                }
                break;
              case 1:
                arr[index] = {
                  url: item,
                  index: newValue
                }
                break;
              case 2:
                arr[index] = {
                  url: item,
                  index: newValue + 1
                }
                break;
              default:
                break;
            }
          })
        }

        // this.setData({
        //   swiperList
        // })
        this.setData({
          swiperCurrent: newValue,
          ['activityInfo.postrUrl']: this.data.list[newValue],
          swiperList
        })
      }
    },
    activityid: {
      type: String,
      value: -1,
      observer(newValue) {
        this.setData({
          ['activityInfo.activityid']: newValue
        })
      }
    },
    url: {
      type: String,
      value: ""
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    isShowSwiper: true,
    swiperHeight: 0,
    swiperCurrent: 0,
    totalCount: 0,
    buttonOpenType: '',
    activityInfo: {
      activityid: 0,
      postrUrl: ''
    },
    swiperList: null // 真正轮播的数组
  },

  lifetimes: {
    ready() {
      this.onSetSwiperHeight()
      this.setButtonOpenType()
    },
    attached() {

    }
  },
  pageLifetimes: {
    show() {
      this.setButtonOpenType()
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    stopPropagation() {
      return false
    },
    /**
     * 设置保存按钮的open-type的值，没有保存图片到相册权限时候为openSetting
     */
    setButtonOpenType() {
      wx.getSetting({
        success: (res) => {
          let status = res.authSetting['scope.writePhotosAlbum']
          if (status === true) {
            this.setData({
              buttonOpenType: ''
            })
          } else if (status === false) {
            this.setData({
              buttonOpenType: 'openSetting'
            })
          }
        }
      })
    },
    /**
     * 设置swiper的高度，高度为屏幕高度减去footer的高度
     */
    onSetSwiperHeight() {
      let systemInfo = wx.getSystemInfoSync()
      let windowHeight = systemInfo.windowHeight

      this.onGetFooterHeight()
        .then((footerHeight) => {
          let swiperHeight = windowHeight - footerHeight

          this.setData({
            swiperHeight
          })
        })
    },
    /**
     * 获取footer的高度
     */
    onGetFooterHeight() {
      return new Promise((resolve, reject) => {
        const query = this.createSelectorQuery()
        query.select('.footer').boundingClientRect()
        query.exec(function(res) {
          resolve(res[0].height)
        })
      })
    },
    /**
     * swiper bindchange调用的方法
     */
    onChangeSwiper(e) {
      let {
        current,
        currentItemId
      } = e.detail
      let {
        list
      } = this.data
      let {
        swiperList
      } = this.data
      // 这里是轮播的逻辑
      if (currentItemId == 0) {
        switch (current) {
          case 0:
            swiperList[1] = {
              url: list[currentItemId * 1 + 1],
              index: currentItemId * 1 + 1
            }
            swiperList[2] = {
              url: list[list.length - 1],
              index: list.length - 1
            }
            break;
          case 1:
            swiperList[2] = {
              url: list[currentItemId * 1 + 1],
              index: currentItemId * 1 + 1
            }
            swiperList[0] = {
              url: list[list.length - 1],
              index: list.length - 1
            }
            break;
          case 2:
            swiperList[0] = {
              url: list[currentItemId * 1 + 1],
              index: currentItemId * 1 + 1
            }
            swiperList[1] = {
              url: list[list.length - 1],
              index: list.length - 1
            }
            break;
        }
      } else if (currentItemId == (list.length - 1)) {
        switch (current) {
          case 0:
            swiperList[1] = {
              url: list[0],
              index: 0
            }
            swiperList[2] = {
              url: list[currentItemId * 1 - 1],
              index: currentItemId * 1 - 1
            }
            break;
          case 1:
            swiperList[2] = {
              url: list[0],
              index: 0
            }
            swiperList[0] = {
              url: list[currentItemId * 1 - 1],
              index: currentItemId * 1 - 1
            }
            break;
          case 2:
            swiperList[0] = {
              url: list[0],
              index: 0
            }
            swiperList[1] = {
              url: list[currentItemId * 1 - 1],
              index: currentItemId * 1 - 1
            }
            break;
        }
      } else {
        switch (current) {
          case 0:
            swiperList[1] = {
              url: list[currentItemId * 1 + 1],
              index: currentItemId * 1 + 1
            }
            swiperList[2] = {
              url: list[currentItemId * 1 - 1],
              index: currentItemId * 1 - 1
            }
            break;
          case 1:
            swiperList[2] = {
              url: list[currentItemId * 1 + 1],
              index: currentItemId * 1 + 1
            }
            swiperList[0] = {
              url: list[currentItemId * 1 - 1],
              index: currentItemId * 1 - 1
            }
            break;
          case 2:
            swiperList[0] = {
              url: list[currentItemId * 1 + 1],
              index: currentItemId * 1 + 1
            }
            swiperList[1] = {
              url: list[currentItemId * 1 - 1],
              index: currentItemId * 1 - 1
            }
            break;
        }
      }

      this.setData({
        swiperCurrent: currentItemId * 1,
        ['activityInfo.postrUrl']: list[currentItemId * 1],
        swiperList
      })
    },
    /**
     * 关闭按钮调用的方法
     */
    onClickBtnClose() {
      this.triggerEvent('eventClose')
    },
    /**
     * 获取是否有保存图片到相册的权限
     */
    onGetSettingOfSaveImageToPhotosAlbum() {
      return new Promise((resolve, reject) => {
        wx.getSetting({
          success: (res) => {
            let status = res.authSetting['scope.writePhotosAlbum']
            if (status === undefined) { // 没有授权记录的情况
              wx.authorize({
                scope: 'scope.writePhotosAlbum',
                success: (res) => {
                  resolve()
                  this.setData({
                    buttonOpenType: 'openSetting'
                  })
                },
                fail: (err) => {
                  reject({
                    showTip: true
                  })
                  this.setData({
                    buttonOpenType: 'openSetting'
                  })
                }
              })
            } else if (status === false) { // 授权记录为false的情况
              this.setData({
                buttonOpenType: 'openSetting'
              })
              reject({
                showTip: false
              })
            } else {
              // console.log('授权了')
              resolve()
            }
          }
        })
      })
    },
    /**
     * 获取图片信息
     */
    onGetImageInfo() {
      let src = this.data.list[this.data.swiperCurrent]
      return new Promise((resolve, reject) => {
        wx.getImageInfo({
          src,
          success(res) {
            if (res.errMsg === 'getImageInfo:ok') {
              resolve(res)
            } else {
              reject({
                showTip: true
              })
            }
          },
          fail() {
            reject({
              showTip: true
            })
          }
        })
      })
    },
    /**
     * 保存图片到相册
     */
    onSaveImageToPhotosAlbum(filePath) {
      return new Promise((resolve, reject) => {
        wx.saveImageToPhotosAlbum({
          filePath,
          success(res) {
            resolve(res)
          },
          fail() {
            reject({
              showTip: true
            })
          }
        })
      })
    },
    /**
     * 保存图片
     */
    onSavePhoto() {
      wx.showLoading({
        title: '保存中',
        mask: true
      })
      this.onGetSettingOfSaveImageToPhotosAlbum()
        .then(() => {
          return this.onGetImageInfo()
        })
        .then((res) => {
          let tempFilePath = res.path
          return this.onSaveImageToPhotosAlbum(tempFilePath)
        })
        .then(() => {
          wx.hideLoading()
          wx.showModal({
            title: '提示',
            content: '图片已保存到手机相册',
            showCancel: false,
            mask: true
          })
        })
        .catch((err) => {
          wx.hideLoading()
          err.showTip && wx.showToast({
            title: '保存失败',
            icon: 'none',
            mask: true
          })
        })
    },
    /**
     * 创建海报
     */
    onCreatePoster(e) {
      this.setData({
        ['activityInfo.postrUrl']: this.data.list[this.data.swiperCurrent]
      })
    },
    onShowSwiper() {
      this.setData({
        isShowSwiper: true
      })
    },
    onHideSwiper() {
      this.setData({
        isShowSwiper: false
      })
    }
  }
})复制代码

转载于:https://juejin.im/post/5cac0d7ce51d456e5238c966