极乐门资源网 Design By www.ioogu.com

最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了。 原因是我不停的去 setData 会导致操作反馈延迟严重,无法及时将操作处理结果及时传递到视图层。

微信小程序实现吸顶效果

后面就对代码进行了调整,避免不停的去setData

效果图

吸顶前

微信小程序实现吸顶效果

吸顶后

微信小程序实现吸顶效果

代码部分

wxml

<view style="width: 90%; height: 300rpx; background: #f0f0f0; margin: 30rpx auto;"></view>
<view style="width: 90%; height: 300rpx; background: #f0f0f0; margin: 30rpx auto;"></view>


<view class="navbar-wrap">
 <view class="column {{isFixedTop" id="navbar">
  <view class="block active">新品推荐</view>
  <view class="block">限时优惠</view>
  <view class="block">火爆热搜</view>
  <view class="block">猜你喜欢</view>
 </view>
 <!-- 用于吸顶后 占位用的 -->
 <view class="column" wx:if="{{isFixedTop}}"></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: 80rpx;
 display: flex;
 flex-direction: row;
 align-items: center;
 justify-content: space-around;
 background: #fff;
 border-bottom: solid 1px #eee;

 top: 0;
 left: 0;
 z-index: 100;
}

.navbar-wrap .column.fixed {
 position: fixed;
}

/* 以下的代码不重要 */

.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%);
}

js

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

 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function(options) {

 },

 /**
  * 生命周期函数--监听页面显示
  */
 onShow: function() {
  var that = this;

  if (that.data.navbarInitTop == 0) {

   //获取节点距离顶部的距离
   wx.createSelectorQuery().select('#navbar').boundingClientRect(function(rect) {
    if (rect && rect.top > 0) {
     var navbarInitTop = parseInt(rect.top);
     that.setData({
      navbarInitTop: navbarInitTop
     });
    }
   }).exec();

  }
 },

 /**
  * 监听页面滑动事件
  */
 onPageScroll: function(e) {
  var that = this;
  var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度

  //判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断
  var isSatisfy = scrollTop >= that.data.navbarInitTop ? true : false;
  //为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等
  if (that.data.isFixedTop === isSatisfy) {
   return false;
  }

  that.setData({
   isFixedTop: isSatisfy
  });
 }


})

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

标签:
微信小程序,吸顶

极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“微信小程序实现吸顶效果”

暂无微信小程序实现吸顶效果的评论...

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?