微信小程序实现吸顶效果

最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了。 原因是我不停的去 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?'fixed':''}}" 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
  });
 }

})

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

(0)

相关推荐

  • JS实现吸顶特效

    本文实例为大家分享了JS实现吸顶特效的具体代码,供大家参考,具体内容如下 知识点 1.scroll家族和offset家族的结合运用 2.当nav的offsetTop大于屏幕卷去高度的时候,进行吸顶 3.添加一个固定类,如果满足条件,为nav加类名 运行效果 滚动页面时,保证导航栏吸顶 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

  • vue实现吸顶、锚点和滚动高亮按钮效果

    因公司后台管理系统很多功能技术老旧,最近在用vue重构公司的后台管理系统,在做商品管理添加商品这一块,借鉴淘宝的添加商品的交互,需要实现一个简单的吸顶.锚点和滚动高亮按钮的效果. 需求 滚动页面到顶部,实现某元素固定到顶部效果 点击某个按钮,页面滚动到相应的位置 滚动页面,当到达某个位置时,高亮对应的相关按钮 元素吸顶实现方式 关于元素吸顶效果,通过查阅相关资料和相关测试,有三种方式(还有一种是jquery的方法,这里就不介绍了) 一.使用position:sticky 1. 什么是positi

  • js实现导航吸顶效果

    话不多说,请看代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title&

  • 原生js实现吸顶效果

    实现思路如下: 1. div初始居普通文档流中 2. 给window添加scroll事件(可事件节流),获取div的offset的top值,滚动时scrollTop值和top比较,当到达top时给div添加一个fixed的class使其固定 3. 向上滚动时当到达div初始top时则删除fixed的class,此时div又回到普通文档流中 4. fixed样式非IE6浏览器使用position:fixed,IE6使用position:absolute和IE expression 效果图: 代码如

  • 实现一个 Vue 吸顶锚点组件方法

    前言 近期产品小哥哥给我提了一个新需求,在一个页面的滚动区中添加一组锚点定位按钮,点击按钮将对应的元素显示在页面的可视区中.当按钮组超出页面可视区的时候将其固定在滚动区域的头部,当滚动区滚动时,高亮距离滚动区顶部最近的元素所匹配的锚点按钮. 拆分功能点 现在我们已经明确需求了,接下来我们总结一下这个需求有哪些功能点: 按钮组要有吸顶效果 点击按钮要有锚点定位功能 滚动内容区需要找到对应的按钮并高亮 吸顶组件 要做一个吸顶效果最简单的方式是将 css 的 position 属性设置为 sticky

  • 微信小程序实现吸顶效果的方法实例

    目录 1. 实现方式 2. 存在的问题 3. 考虑是否有更好的实现方式 总结 背景是做一个日期title随着用户滑动,当滑到当前日期list数据时,有一个吸顶效果,并且该效果与原来样式不一样 1. 实现方式 scroll-view为小程序原生组件 handleScroll为滑动时触发的事件 scroll-y表示在垂直方向上允许滑动 class为fixed的元素在这做固定定位在scroll-view容器的顶部用于显示当前滑动到的日期 利用动态绑定class的方法去控制visibility的显示与否

  • 微信小程序实现吸顶效果

    最开始的时候,在小程序中实现吸顶效果,开发工具看起来还挺好的,但是在真机上就会有问题了. 原因是我不停的去 setData 会导致操作反馈延迟严重,无法及时将操作处理结果及时传递到视图层. 后面就对代码进行了调整,避免不停的去setData 效果图 吸顶前 吸顶后 代码部分 wxml <view style="width: 90%; height: 300rpx; background: #f0f0f0; margin: 30rpx auto;"></view>

  • 微信小程序实现吸顶盒效果

    本文实例为大家分享了微信小程序实现吸顶盒效果的具体代码,供大家参考,具体内容如下 html部分  <!-- 列表 -->     <view class="partner-content-container mt15">         <!-- 吸顶盒 -->         <view class="partner-list-header {{isFixedTop?'tab-fixed':''}}" id='operat

  • 微信小程序实现吸顶特效

    本文实例为大家分享了微信小程序实现吸顶特效的具体代码,供大家参考,具体内容如下 效果图 wxml代码: <view class="xiding {{oneFixed}}" id="tab"> <van-row custom-class="goods_row" > <van-col span="12" custom-class="title-1"> 食疗方法 </va

  • 微信小程序canvas写字板效果及实例

    微信小程序canvas写字板效果及实例 写字板效果:书写文字,画板重置,导出图片,导出图片前判断是否书写内容 app.json: 添加一个路由:"pages/canvas/canvas" { "pages":[ "pages/index/index", "pages/logs/logs", "pages/canvas/canvas" ], "window":{ "navigat

  • 微信小程序左滑删除效果的实现代码

    今天我们说下微信小程序左滑删除效果的实现,现在市场上很多APP都在使用这个效果,一个listView页面,向左滑动一条item时,右侧会出现一个删除或者其他的选项,用户体验非常好,操作起来十分方便,今天我们使用微信小程序来实现这个效果....... 先看效果 要实现的效果: 1,当向左滑动时,item跟随手指像左移动,同时右侧出现两个可点击的按钮 2,当滑动距离大于按钮宽度一半松开手指时,item自动滑动到左侧显示出按钮,小于一半时item自动回到原来的位置,隐藏按钮. 思路: 1,首先页面每个

  • 微信小程序顶部可滚动导航效果

    需求是小程序做头部做导航分类的效果 顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,内容用类似模板方式引用,可重复利用 <scroll-view class="scroll-view_H" scroll-x="{{true}}" style="width: 100%"> <view wx:for="{{classify}}" wx:key="id" data-type

  • 微信小程序实现跟随菜单效果和循环嵌套加载数据

    本文实例为大家分享了微信小程序实现跟随菜单效果.微信小程序循环嵌套加载数据,供大家参考,具体内容如下 效果如图: 代码如下: wxml //使用循环嵌套data数据格式写对即可 <scroll-view class="left" scroll-y> <view wx:for="{{left}}" class="leftlist {{index==_click?'yes':''}}" data-i="{{index}}&

  • 微信小程序实现tab切换效果

    微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view class="body"> <view class="nav bc_white"> <view class="{{selected?'red':'default'}}" bindtap="selected"

  • 微信小程序中吸底按钮适配iPhone X方案

    随着第二三批iPhone X的陆续到货,身边的土豪们纷纷用了起来,因为iPhone X的齐刘海导致的适配问题很多,所以这群土豪更沉浸在各种找bug中,不出所料,豌豆公主小程序在一些地方也出现了一丢丢体验不好的地方,主要是商品详情页和购物车的吸底按钮栏,会与 Home Indicator 横条重叠,这样在点击下方按钮时很容易误触发手势操作,如下图: 截图来自网络,侵删 是bug就得修,是体验问题就得优化,于是立马搞了一台iPhone X开始研究. 网页端的适配还好,有 viewport meta

随机推荐