場景

在項目中有一個需求，監(jiān)聽頁面滾動，動態(tài)修改組件的背景色，之前是在監(jiān)聽以后，計算顏色，通過

this.setData({
    bgColor: newBgColor
})
復(fù)制代碼

方式修改背景色，但是在快速滾動情況下，會瘋狂修改，一直調(diào)用setData()方法，性能很糟糕，會出現(xiàn)卡頓情況

核心就是減少setData()方法調(diào)用

解決思路

方案1

可以使用函數(shù)節(jié)流，防止調(diào)用太多，減少調(diào)用頻率

方案2

具體分析，我們只是單純的修改樣式，不涉及邏輯，可以將修改的樣式的動作放到渲染層去處理，不在通過邏輯層，直接將setData()次數(shù)減低到零

• 要點

• 小程序的運行環(huán)境分成渲染層和邏輯層
• 在渲染層，可以監(jiān)聽事件，修改元素的樣式

實現(xiàn)

方案1

定義一個函數(shù)節(jié)流工具

/**
 * @description 函數(shù)節(jié)流: 每隔一段時間，只執(zhí)行一次函數(shù)
 * @param { Function } fn 需要延遲執(zhí)行的函數(shù)
 * @param { Number } interval 延遲執(zhí)行的時間，默認(rèn)值500ms
 */
export function throttle(fn, interval = 500) {
  // 記錄定時器id
  let timer = null
  // 是否是第一次調(diào)用
  let isFirstTime = true

  return function () {
    const args = arguments
    const _me = this

    // 第一次直接執(zhí)行,改變標(biāo)志,無需延遲
    if (isFirstTime) {
      fn.apply(_me, args)
      return (isFirstTime = false)
    }

    // 不是第一次
    // 存在定時器,前面的延遲操作沒有完成,直接返回,拒絕調(diào)用請求
    if (timer) {
      return false
    }

    // 延遲執(zhí)行
    timer = setTimeout(() => {
      clearTimeout(timer)
      timer = null
      fn.apply(_me, args)
    }, interval)
  }
}
復(fù)制代碼

頁面中使用節(jié)流函數(shù)

// index.js
import { throttle } from '../utils/util';

// 創(chuàng)建一個長度100的數(shù)組
const list = [...new Array(100).keys()].map(i => {
  return { name: 'lisr' + (i + 1), age: i + 1}
})

Page({
  data: {
    list: list
  },

  onScroll: throttle(function(e) {
    console.log(e)
    const { scrollTop: top } = e.detail
    let channelColor = top * 1 // 任意通道顏色
    if(channelColor > 255) {
      channelColor = channelColor%255
    }
	
	// 樣式
    const style = `background-color: rgb(${channelColor}, ${channelColor},${channelColor});`
    this.setData({
      style  // 設(shè)置背景色
    }, () => {
      this.countStatistics()
    })
  }, 300),
  // 調(diào)用次數(shù)
  count: 0,
  // 更新調(diào)用次數(shù)和并打印出來
  countStatistics() {
    ++this.count
    console.log(this.count)
  }
})
復(fù)制代碼

頁面結(jié)構(gòu)

<!-- index.html -->
<!-- 一個大盒子包住所有的元素 -->
<view class="container-fill">
    <!-- 包住 swiper 組件 -->
    <view class="scroll-fullpage" style="height: 100%">
        <scroll-view scroll-y="true" style="height: 100%;" bindscroll="onScroll">
            <view class="item" hover-class="none" hover-stop-propagation="false" style="{{style}}" wx:for="{{ list }}" wx:key="index">
                {{item.name}} - {{item.age}}
            </view>
        </scroll-view>
    </view>
</view>
復(fù)制代碼

頁面樣式

/* index.wxss */
.container-fill {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 10;
}

.container-fill .scroll-fullpage {
  height: 100%;
  transition: all 0.3s;
}

.scroll-fullpage .item {
  height: 30%;
  width: 80%;
  background-color: skyblue;
  border-radius: 10rpx;
  margin: 50rpx auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50rpx;
}
復(fù)制代碼

演示效果 TODO

方案2

定義wxs, 用于修改元素的樣式

// 調(diào)用次數(shù)
var count = 0

function handleScroll(e, ownerInstance) {
  var top = e.detail.scrollTop
  var channelColor = top * 1 // 任意通道顏色
  if (channelColor > 255) {
    channelColor = channelColor % 255
  }
  var instances = ownerInstance.selectAllComponents('.item') // 獲取類名為item的組件
  for(var i = 0; i < instances.length; i++) {
    var instance = instances[i]
    instance.setStyle({
      'background-color':
        'rgb(' + channelColor + ',' + channelColor + ',' + channelColor + ')', // 設(shè)置背景色
    })
  }
  countStatistics()
}

// 更新調(diào)用次數(shù)和并打印出來
function countStatistics() {
  ++count
  console.log(count)
}

module.exports = {
  handleScroll: handleScroll
}
復(fù)制代碼

頁面邏輯層代碼

// 創(chuàng)建一個長度100的數(shù)組
const list = [...new Array(100).keys()].map(i => {
  return { name: 'lisr' + (i + 1), age: i + 1}
})

Page({
  data: {
    list: list
  }
})
復(fù)制代碼

頁面渲染層

1. 需要引入寫好的wxs模塊

<wxs module="module" src=http://www.wxapp-union.com/"./index.wxs"></wxs>
復(fù)制代碼

2. 監(jiān)聽滾動事件，在里面直接修改元素樣式

<scroll-view scroll-y="true" style="height: 100%;" bindscroll="{{module.handleScroll}}">
復(fù)制代碼

注意引入模塊使用{{}}包裹

完整代碼如下：

<!-- index.html -->
<wxs module="module" src=http://www.wxapp-union.com/"./index.wxs"></wxs>

<!-- 一個大盒子包住所有的元素 -->
<view class="container-fill">
    <!-- 包住 swiper 組件 -->
    <view class="scroll-fullpage" style="height: 100%">
        <scroll-view scroll-y="true" style="height: 100%;" bindscroll="{{module.handleScroll}}">
            <view class="item" hover-class="none" hover-stop-propagation="false" style="{{style}}" wx:for="{{ list }}" wx:key="index">
                {{item.name}} - {{item.age}}
            </view>
        </scroll-view>
    </view>
</view>

復(fù)制代碼

頁面樣式

/* index.wxss */
.container-fill {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 10;
}

.container-fill .scroll-fullpage {
  height: 100%;
  transition: all 0.3s;
}

.scroll-fullpage .item {
  height: 30%;
  width: 80%;
  background-color: skyblue;
  border-radius: 10rpx;
  margin: 50rpx auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 50rpx;
}