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

1. 實現(xiàn)方式

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

• 該函數(shù)為處理每一個scheduleDay元素距離scroll-view頂部與當前日期的數(shù)據(jù)
• 集合成一個數(shù)據(jù)如下所示以此類推
• wx.createSelectorQuery()使用方法具體參考(一般用于獲取某個元素節(jié)點的位置信息)
• 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組件中滑動的距離
• 當 滑動高度 >= 某個元素節(jié)點距離scrollview頂部的距離 時 設置當前滑動到的日期
• 然后控制固定定位的元素出現(xiàn)或隱藏即可實現(xiàn)

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

2. 存在的問題

• 由于handleScroll滑動事件觸發(fā)的頻率有誤差，導致在滑到最上方時并沒有隱藏fixed的元素
• 上拉時fixed元素與原本該位置的日期title會有不好的ui體驗效果
• 參考下圖

該圖為默認情況下的ui顯示

用戶滑動至該日期下的list位置時的ui顯示，或者是⬆️存在的問題的第一點會出現(xiàn)的情況

然后會影響⬆️存在的問題的第二點的情況

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

最開始考慮是動態(tài)給每一個元素節(jié)點的日期title加上相應的class去控制單獨樣式的改變情況，但是每一個元素的class都相同，無法使用該方式去解。

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

IntersectionObserver，該方法也嘗試過，但沒有成功，有機會再嘗試一下。

總結

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

最新評論