文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

微信小程序实现简单的吸顶效果

2024-04-02 19:55

关注

本文实例为大家分享了微信小程序实现简单吸顶效果的具体代码,供大家参考,具体内容如下

需求:进入页面后首先看到banner布局,然后是tab切换栏以及页面内容,当页面滚动到一定距离后,tab切换栏始终固定在顶部

wxml部分代码如下:

<!--pages/test/test.wxml-->
<view style="padding-bottom:30rpx;position:fixed;top:0;width:100%;background:#2ea7e0;">
    <view class="wehx-top_input weui-flex">
        <!-- 搜索框 -->
        <view class="weui-flex__item">
            <view class="wehx-search__form">
                <view class="wehx-search__box">
                    <icon class="weui-icon-search_in-box" type="search" size="17" color="#0C98C5"></icon>
                    <input type="text" class="wehx-search__input" placeholder-class="wehx-input_placeholder" placeholder="关键字搜索,空格隔开" confirm-type="search" bindconfirm="search" value="{{search}}" />
                    <view class="weui-icon-clear" wx:if="{{search}}" bindtap="clearSearch">
                        <icon type="clear" size="14" color="#2ea7e0"></icon>
                    </view>
                </view>
            </view>
        </view>
        <view bindtap='toSend' style="display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:0 20rpx;color:#ffffff;">
            <text class="iconfont icon-fabu-copy" style="font-size:40rpx;line-height:40rpx;"></text>
            <view style="color:#ffffff;font-size:20rpx;padding-top:6rpx;">发单</view>
        </view>
    </view>
</view>
<!-- 用于吸顶后 占位用的 -->
<view style="height:92rpx;width:100%;"></view>
<view style="width: 90%; height: 300rpx; background: red; margin: 30rpx auto;"></view>
<view class="navbar-wrap">
    <view class="column {{isFixedTop?'fixed':''}}" id="navbar">
        <view class="block active">新品推荐</view>
        <view class="block">限时优惠</view>
        <view class="block">火爆热搜</view>
        <view class="block">猜你喜欢</view>
    </view>
</view>
<block wx:for="{{20}}" wx:key="list">
    <view style="width: 100%; height: 120rpx; background: #f0f0f0; margin: 20rpx auto;"></view>
</block>

wxss部分代码如下:


view,
text {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.navbar-wrap {
  width: 100%;
}

.navbar-wrap .column {
  width: 100%;
  height: 82rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  background: #fff;
  border-bottom: solid 1px #eee;
  
  left: 0;
  z-index: 100;
}

.navbar-wrap .column.fixed {
  position: fixed;
  top: 92rpx;
}


.navbar-wrap .column .block {
  width: 25%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  color: #333;
  letter-spacing: 1px;
  position: relative;
}

.navbar-wrap .column .block::after {
  content: "";
  width: 60%;
  height: 3px;
  border-radius: 2px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
}

.navbar-wrap .column .block.active {
  color: #1490ce;
  font-weight: bold;
}

.navbar-wrap .column .block.active::after {
  background: linear-gradient(160deg, rgba(8, 220, 230, 0.7) 10%, rgba(0, 140, 255, 0.7) 90%);
}


.wehx-search__form {
  overflow: hidden;
  background: #fff;
  border-radius: 30rpx;
}

.wehx-top_input {
  height: 62rpx;
  padding-left: 20rpx;
  background: #2ea7e0;
}

.wehx-search__box {
  position: relative;
  padding-left: 68rpx;
}

.wehx-search__input {
  height: 62rpx;
  font-size: 28rpx;
  border-radius: 32.5rpx;
  margin-right: 50px;
}

js部分代码如下:

Page({
  data: {
    navbarInitTop: 0, //导航栏初始化距顶部的距离
    isFixedTop: false, //是否固定顶部
  },
  
  onLoad: function (options) {

  },
  
  onShow: function () {
    var that = this;
    if (that.data.navbarInitTop == 0) {
      console.log(that.data.navbarInitTop)
      //获取节点距离顶部的距离
      wx.createSelectorQuery().select('#navbar').boundingClientRect(function (rect) {
        if (rect && rect.top > 0) {
          console.log(rect.top - 92)
          //92是页面搜索框一栏整体的高度  若无搜索栏一项时可以不加此项目
          var navbarInitTop = parseInt(rect.top - 92);
          that.setData({
            navbarInitTop: navbarInitTop
          });
        }
      }).exec();
    }
  },
  
  onPageScroll: function (e) {
    var that = this;
    var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度
    // console.log(e.scrollTop) //滚动149rpx  //滚动条距离顶部高度
    //判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断
    var isSatisfy = scrollTop >= (that.data.navbarInitTop) ? true : false;
    //为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等
    if (that.data.isFixedTop === isSatisfy) {
      return false;
    }
    that.setData({
      isFixedTop: isSatisfy
    });
  }
})

json部分代码如下:

{
  "navigationBarTitleText": "测试",
  "usingComponents": {}
}

最终效果:

未吸顶:

吸顶后:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯