1、關(guān)鍵代碼

// 滾動(dòng)時(shí)觸發(fā)
bindscroll({detail: {scrollTop}}) {
	let that = this,
	titleContenData = that.data.titleContenData;

	// 防抖
	// timer定義在全局
	// 如果沒有防抖會(huì)觸發(fā)許多次
	// 對性能不友好
	if (timer !== undefined) clearTimeout(timer);

	timer = setTimeout(function () {
		// 當(dāng)右側(cè)滾動(dòng)到頂部時(shí)強(qiáng)制賦值為0
		// 因?yàn)樵跐L動(dòng)時(shí)一般獲取到的數(shù)據(jù)是0-10的范圍
		// 小概率會(huì)獲取到0
		// 因?yàn)樵却鎯?chǔ)viewTop屬性的第一個(gè)值就是0
		scrollTop = scrollTop < 10 ? 0 : scrollTop;
		let selectIndex = titleContenData.findIndex((item) => item.viewTop >= scrollTop);
		that.setData({
			// 設(shè)置高亮
			selectIndex,
			// 此屬性聯(lián)動(dòng)左側(cè)滾動(dòng)條
			// 當(dāng)右側(cè)滾動(dòng)時(shí)
			// 左側(cè)也會(huì)相應(yīng)的滾動(dòng)
			// 只是滾動(dòng)的距離不一樣
			scrollTop: 5 * that.data.selectIndex
		});
	}, 100);
}

微信小程序有兩個(gè)版本，此處展示柔和版的代碼，還有一個(gè)版本是生硬版。兩個(gè)版本的區(qū)別在于右側(cè)滑動(dòng)（滾動(dòng)）時(shí)，頁面動(dòng)畫和定位的位置不同，建議使用柔和版。兩個(gè)版本存在的共同問題是，當(dāng)內(nèi)容倒數(shù)部分如果數(shù)據(jù)比較少，首次點(diǎn)擊左側(cè)倒數(shù)部分的標(biāo)簽會(huì)發(fā)生回跳到對應(yīng)位置，此問題暫未解決。

2、完整代碼

1、gitee(碼云) - develop分支 - leftAndRightColumnsSoft 文件夾-柔和版
2、gitee(碼云) - develop分支 - leftAndRightColumnsStiff 文件夾-生硬版