小程序中的吸顶效果（小程序操作DOM）

小程序中的吸顶效果

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) 输出节点信息详情