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

Myth丶恋晨 2022-12-29 09:37 167阅读 0赞

### 小程序中的吸顶效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70]

1.  wxml

<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>

1.  wxss

.top{ 
      display: fixed;
      left: 0;
      top:0;
    }

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70]: /images/20221120/659322f5ebda4a848d02ffdd50114885.png