发布日期:2024-07-18 15:04 点击次数:99
配景是作念一个日历title跟着用户滑动,当滑到面前日历list数据时软件开发价格,有一个吸顶恶果,况兼该恶果与原来方法不同样
1. 完了方式 scroll-view为小方法原生组件 handleScroll为滑动时触发的事件 scroll-y示意在垂直方进取允许滑动 class为fixed的元素在这作念固定定位在scroll-view容器的顶部用于露出面前滑动到的日历 左右动态绑定class的方法去为止visibility的露出与否 class为scheduleDay的元素为每一个日历title data-value的值绑定为该日历 该函数为措置每一个scheduleDay元素距离scroll-view顶部与面前日历的数据 聚积成一个数据如下所示依此类推 wx.createSelectorQuery()使用方法具体参考(一般用于得回某个元素节点的位置信息) developers.weixin.qq.com/miniprogram… e.detail.scrollTop为在scroll-view组件中滑动的距离 当 滑动高度 >= 某个元素节点距离scrollview顶部的距离 时 成立面前滑动到的日历 然后为止固定定位的元素出现或阴事即可完了本文对于css就不作念过多展示,逻辑念念路对了即可完了功能恶果
2. 存在的问题 由于handleScroll滑动事件触发的频率有错误,导致在滑到最上方时并莫得阴事fixed的元素 上拉时fixed元素与正本该位置的日历title会有不好的ui体验恶果 参考下图该图为默许情况下的ui露出
用户滑动至该日历下的list位置时的ui露出,概况是⬆️存在的问题的第少量会出现的情况
然后会影响⬆️存在的问题的第二点的情况
小程序开发 3. 接洽是否有更好的完了方式最开动接洽是动态给每一个元素节点的日历title加上相应的class去为止单独方法的改换情况,然则每一个元素的class王人交流,无法使用该方式去解。
在历史同期号码中,组选0-9号码出现次数为:7出现3次,石家庄软件开发号码0、6出现4次,号码2、5出现6次,号码1出现7次,号码3、9出现8次,号码4、8出现10次,本期看好两码3、9出现。
通过为止每一个单独元素节点的方法去修改,然则小方法不像浏览器中存在DOM不错去通过dom.style.xxx去改换每一个单独元素的方法。
IntersectionObserver,该方法也尝试过,但莫得见效,有契机再尝试一下。
回来到此这篇对于微信小方法完了吸顶恶果的著作就先容到这了软件开发价格,更多干系小方法吸顶恶果践诺请搜索剧本之家当年的著作或不息浏览底下的干系著作但愿大众以后多多维持剧本之家!
您可能感兴味的著作:微信小方法完了苟简的吸顶恶果微信小方法完了苟简吸顶恶果微信小方法完了列表转机头部吸顶的示例代码微信小方法wxs完了吸顶恶果微信小方法完了吸顶殊效微信小方法完了吸顶恶果微信小方法完了吸顶盒恶果