//index.js
//获取应用实例
const app = getApp()
Page({
data: {
testData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
testData2: [1, 2, 3, 4, 5, 10],
//是否显示 悬停布局
isshow:false,
//悬浮布局的数据
toptexxt:""
},
onLoad: function () {
},
/**
* 页面加载完成
*/
onReady: function () {
},
/**
* 页面滚动监听
*/
onPageScroll: function (e) {
//console.log(e)
let that = this
let query = wx.createSelectorQuery()
query.selectAll(".section-cell").boundingClientRect(function (res) {
console.log(res)
let size =res.length
let position = -1
let topshow = -1000//根据需求设置大小
let i=0
//根据 top 的 大小 获取 当前距离顶部最近的view 的下标， 负数最大值 或者是0，
for(i=0i<sizei++){0
let top = res[i].top
if(top<=0 &&top>topshow ){
topshow = top
position=i
}
}
console.log("当前坐标是 position = "+position)
let isshow =false
if (res[0].top<0){
if(position==-1) position=0
isshow = true
}
that.setData({
isshow: isshow,
toptexxt: isshow?that.data.testData[position]:""
})
}).exec()
},
})
<!--index.wxml-->
<view>
<view class='header'>这里是header</view>
<view hidden='{{!isshow}}'>
<view class= "section-header section-fixed" >这是section-header {{toptexxt}}</view>
</view>
<view wx:for="{{testData}}" wx:key="{{testData}}">
<view>
<view class='section-cell' id='top{{item}}'>{{item}} </view>
<view wx:for="{{testData2}}" wx:key="{{testData2}}">
<view class='section-cell2' id='child{{item}}'>{{item}}</view>
</view>
</view>
</view>
</view>
/**index.wxss**/
.section-placeholder {
background-color: white
}
.section-fixed {
position: fixed
top: 0
}
.header {
height: 300rpx
width: 750rpx
background-color: bisque
}
.section-header {
height: 80rpx
width: 750rpx
background-color: rebeccapurple
}
.section-cell {
width: 750rpx
height:80rpx
background-color: gold
margin-top: 2rpx
}
.section-cell2 {
height: 50rpx
width: 750rpx
background-color: darkred
}
图片效果
querySelector：return the first matching Element
node within the node's subtrees. If there is no such node, the method must
return null.（返回指定元素节点的子树中匹配selector的集合中的第一个，如果没有匹配，返回null）
querySelectorAll：
return a NodeList containing
all of the matching Element nodes within the node's subtrees, in document order.
If there are no such nodes, the method must return an empty NodeList.
（返回指定元素节点的子树中匹配selector的节点集合，采用的是深度优先预查找；如果没有匹配的，这个方法返回空集合）
使用方法：
复制代码
代码如下:
var element =
baseElement.querySelector(selectors)
var elementList =
baseElement.querySelectorAll(selectors)
这在BaseElement
为document的时候，没有什么问题，各浏览器的实现基本一致；但是，当BaseElement 为一个普通的dom Node的时候（支持这两个方法的dom
Node），浏览器的实现就有点奇怪了，举个例子：
复制代码
代码如下:
<div class="test" id="testId">
<p><span>Test</span></p>
</div>
<script type="text/javascript">
var testElement=
document.getElementById('testId')
var element =
testElement.querySelector('.test span')
var elementList =
document.querySelectorAll('.test span')
console.log(element)//
<span>Test</span>
console.log(elementList)// 1
</script>
按照W3C的来理解，这个例子应该返回：element：null；elementList：[]因为作为baseElement的
testElement里面根本没有符合selectors的匹配子节点；但浏览器却好像无视了baseElement，只在乎selectors，也就是说此时baseElement近乎document；这和我们的预期结果不合，也许随着浏览器的不断升级，这个问题会得到统一口径！
人的智慧总是无穷的，Andrew
Dupont发明了一种方法暂时修正了这个怪问题，就是在selectors前面指定baseElement的id，限制匹配的范围；这个方法被广泛的应用在各大流行框架中；
Jquery的实现：
复制代码
代码如下:
var oldContext = context,
old =
context.getAttribute( "id" ),<BR>nid = old || id,
try {
if (
!relativeHierarchySelector || hasParent ) {
return makeArray(
context.querySelectorAll( "[id='" + nid + "'] " + query ), extra )
}
}
catch(pseudoError) {} <BR>finally {
if ( !old )
{oldContext.removeAttribute( "id" )}
}
先不看这点代码中其他的地方，只看他如何实现这个方法的；这点代码是JQuery1.6的片段；当baseElement没有ID的时候，给他设置一个id
= "__sizzle__”，然后再使用的时候加在selectors的前面，做到范围限制；context.querySelectorAll( "[id='" +
nid + "'] " + query
；最后，因为这个ID本身不是baseElement应该有的，所以，还需要移除：oldContext.removeAttribute( "id" )
，Mootools的实现：
复制代码
代码如下:
var currentId =
_context.getAttribute('id'), slickid = 'slickid__'
_context.setAttribute('id', slickid)
_expression = '#' + slickid + ' '
+ _expression
context = _context.parentNode
Mootools和Jquery类似：只不过slickid = 'slickid__'；其实意义是一样的；
方法兼容性：FF3.5+/IE8+/Chrome 1+/opera 10+/Safari 3.2+
IE 8
：不支持baseElement为object；
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）