小程序中的吸顶效果
1.wxml
<!-- 吸顶view -->
<view hidden="{
{showTabControl}}" class="top">
<van-tabs active="a">
<van-tab title="标签 1" name="a"></van-tab>
<van-tab title="标签 2" name="b"></van-tab>
<van-tab title="标签 3" name="c"></van-tab>
</van-tabs>
</view>
<!-- 滚动容器 -->
<scroll-view
scroll-y
lower-threshold="100"
id="scroller"
bindscrolltolower="scrollToLower"
bindscroll="scrollPosition"
scroll-with-animation="true"
scroll-top="{
{topPosition}}"
style="height:100vh">
<view style='height:200px;border:1px solid black;background:red'></view>
<!-- 吸顶位置 -->
<van-tabs active="a" class='xiding'>
<van-tab title="标签 1" name="a"></van-tab>
<van-tab title="标签 2" name="b">内容 2</van-tab>
<van-tab title="标签 3" name="c">内容 3</van-tab>
</van-tabs>
<view wx:for="{
{listData}}" wx:key="{
{index}}" style="height: 100px;border-bottom: 1px solid #f4f4f4;">
<van-card
num="2"
price="{
{item.price}}"
title="{
{item.title}}"
thumb="{
{ item.show.img }}"
bindtap='go'
data-id='{
{item.iid}}'
/>
</view>
<view style="text-align: center;margin: 10px;">
<view wx:if="{
{loading}}">加载中...</view>
<view wx:if="{
{noMore}}">没有更多了</view>
<view wx:if="{
{loadingFailed}}">数据加载失败,请重试</view>
</view>
</scroll-view>2.wxss
.top{
display: fixed;
left: 0;
top:0;
}
3.js
Page({
data: {
showTabControl: true //默认隐藏吸顶
},
scrollPosition(e) {
wx.createSelectorQuery().select('.xiding').boundingClientRect((rect) => {
// console.log(rect)
const show = rect.top > 0
this.setData({
showTabControl: show
})
}).exec()
},
})小程序操作DOM
<scroll-view scroll-y='true' style="height:100vh;" bindscroll="bindscroll" scroll-into-view="{
{toview}}">
<view class="rol">
<text class="title" id="normalServe">常用应用</text>
<text class="title" id="normalServe1">常用应用2</text>
<text class="title" id="normalServe2">常用应用3</text>
</view>
</scroll-view>
<view class="dadasfa" wx:if="{
{showNav}}"> dsadasfaf
</view>
Page({
//声明节点查询的方法
queryMultipleNodes: function() {
const query = wx.createSelectorQuery() // 创建节点查询器 query
query.select('#productServe').boundingClientRect() // 这段代码的意思是选择Id=productServe的节点，获取节点位置信息的查询请求
query.select('#enterpriseServe').boundingClientRect() // 这段代码的意思是选择Id=enterpriseServe的节点，获取节点位置信息的查询请求
query.select('#normalServe').boundingClientRect() // 这段代码的意思是选择Id=normalServe的节点，获取节点位置信息的查询请求
query.selectViewport().scrollOffset() // 这段代码的意思是获取页面滑动位置的查询请求
query.exec((res) => {
res[0].top // #productServe节点的到页面顶部的距离
res[1].width // #enterpriseServe节点的宽度
res[2].height // #normalServe节点的高度
})
}
})
console.log(res) 输出节点信息详情