背景是做一個(gè)日期title隨著用戶滑動(dòng)，當(dāng)滑到當(dāng)前日期list數(shù)據(jù)時(shí)，有一個(gè)吸頂效果，并且該效果與原來(lái)樣式不一樣

1. 實(shí)現(xiàn)方式

• scroll-view為小程序原生組件
• handleScroll為滑動(dòng)時(shí)觸發(fā)的事件
• scroll-y表示在垂直方向上允許滑動(dòng)
• class為fixed的元素在這做固定定位在scroll-view容器的頂部用于顯示當(dāng)前滑動(dòng)到的日期
• 利用動(dòng)態(tài)綁定class的方法去控制visibility的顯示與否
• class為scheduleDay的元素為每一個(gè)日期title
• data-value的值綁定為該日期

• 該函數(shù)為處理每一個(gè)scheduleDay元素距離scroll-view頂部與當(dāng)前日期的數(shù)據(jù)
• 集合成一個(gè)數(shù)據(jù)如下所示以此類推
• wx.createSelectorQuery()使用方法具體參考(一般用于獲取某個(gè)元素節(jié)點(diǎn)的位置信息)
• developers.weixin.qq.com/miniprogram…

scheduleInfo:[
    {
       top: 8,
       currentDay: '2021-08-15'
    },
    {
       top: 213,
       currentDay: '2021-08-14'
    },
    {
       top: 555,
       currentDay: '2021-08-13'
    },
    ...
]

• e.detail.scrollTop為在scroll-view組件中滑動(dòng)的距離
• 當(dāng) 滑動(dòng)高度 >= 某個(gè)元素節(jié)點(diǎn)距離scrollview頂部的距離 時(shí) 設(shè)置當(dāng)前滑動(dòng)到的日期
• 然后控制固定定位的元素出現(xiàn)或隱藏即可實(shí)現(xiàn)

本文對(duì)于css就不做過(guò)多展示，邏輯思路對(duì)了即可實(shí)現(xiàn)功能效果

2. 存在的問(wèn)題

• 由于handleScroll滑動(dòng)事件觸發(fā)的頻率有誤差，導(dǎo)致在滑到最上方時(shí)并沒(méi)有隱藏fixed的元素
• 上拉時(shí)fixed元素與原本該位置的日期title會(huì)有不好的ui體驗(yàn)效果
• 參考下圖

該圖為默認(rèn)情況下的ui顯示

用戶滑動(dòng)至該日期下的list位置時(shí)的ui顯示，或者是⬆️存在的問(wèn)題的第一點(diǎn)會(huì)出現(xiàn)的情況

然后會(huì)影響⬆️存在的問(wèn)題的第二點(diǎn)的情況

3. 考慮是否有更好的實(shí)現(xiàn)方式

最開(kāi)始考慮是動(dòng)態(tài)給每一個(gè)元素節(jié)點(diǎn)的日期title加上相應(yīng)的class去控制單獨(dú)樣式的改變情況，但是每一個(gè)元素的class都相同，無(wú)法使用該方式去解。

通過(guò)控制每一個(gè)單獨(dú)元素節(jié)點(diǎn)的樣式去修改，但是小程序不像瀏覽器中存在DOM可以去通過(guò)dom.style.xxx去改變每一個(gè)單獨(dú)元素的樣式。

IntersectionObserver，該方法也嘗試過(guò)，但沒(méi)有成功，有機(jī)會(huì)再嘗試一下。

總結(jié)

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)吸頂效果的文章就介紹到這了,更多相關(guān)小程序吸頂效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論