微信小程序实现吸顶效果

叁歲伎倆 2022-11-27 10:29 311阅读 0赞

先看一下效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1][]

data: {
          tabTop: '0'
       },
       /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
        let _this = this;
        const query = wx.createSelectorQuery();
        query.select('#tab').boundingClientRect(function (res) {
          _this.data.tabTop = res.top//255
        }
        ).exec();
      },
      onPageScroll: function (event) {
        // console.log(event.scrollTop > this.data.tabTop)
        if (event.scrollTop > this.data.tabTop) {
          if (this.data.tabFix) {
            return
          }
          else {
            this.setData({
              oneFixed: "Fixed"//添加吸顶类
            })
          }
        }
        else {
          this.setData({
            oneFixed: ''
          })
        }
      },

wxml

<view class="menu-bar {
       {oneFixed}}" id="tab">
    		<block wx:for="{
       {menu}}" wx:key="index">
    			<text class="{
       {indexs == index? 'active': ''}}" bindtap="chooseMenu" data-index="{
       {index}}">{
       {item}}</text>
    		</block>
    	</view>

最后wxss

/* 吸顶 */
    .Fixed {
      width: 100%;
      position: fixed;
      top: 0;
      z-index: 999;
    }
    
    /* 吸顶结束 */

如果对你有帮助,请关注一下博主的小程序支持一下, 在此谢谢了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: /images/20221124/59bad1ea7ced42bc900968f8f111c21f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1]: /images/20221124/526bd7d80939417489e04d52e4248fc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2]: /images/20221124/4de2b11d632d4d6cae8dfe1daca21258.png