脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序吸顶效果

小程序实现简单吸顶效果

 更新时间：2022年05月23日 17:16:54   作者：gyuei  
这篇文章主要为大家详细介绍了小程序实现简单吸顶效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

要求:

1.使页面某一区域始终显示在页面的最顶端
2.页面流畅不卡顿

初始效果如图：

最终效果：

1.wxml部分代码如下:

<view class="search">搜索框</view>
<view class="banner">banner</view>
<view class="content">
  <view class="item" wx:for="{{arry}}">我是内容{{item}}</view>
</view>

2.wxss部分代码如下:

view {
  text-align: center;
}

.banner {
  height: 150px;
  background: palegreen;
}

.search {
  width: 100%;
  height: 40px;
  background: plum;
}

.item {
  height: 50px;
}

/* 设置吸顶效果 */
.search {
  position: sticky;
  position: -webkit-sticky;
  top: 0;/*距离顶部多少吸顶*/
}

3.js部分代码如下:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    arry:[1,2,3,4,5,6,7,8,9,10,11,12]
  }
})

4.json部分代码如下:

{
  "navigationBarBackgroundColor": "#f7f7f5",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText":"示例页面",
  "usingComponents": {}
}

注意:

1.设置粘性定位position: -webkit-sticky; position: sticky;
2.设置top值,距离顶部多少吸顶

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

您可能感兴趣的文章:

相关文章

  • 纯JS实现可用于页码更换的飞页特效示例

    纯JS实现可用于页码更换的飞页特效示例

    这篇文章主要介绍了纯JS实现可用于页码更换的飞页特效,涉及javascript结合时间函数的数学运算与页面元素属性动态修改相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • JavaScript编码风格精选指南(编写可维护的代码规范)

    JavaScript编码风格精选指南(编写可维护的代码规范)

    javascript编码规范能够增强代码的简洁性、可读性、可扩展性,项目做到后期,每修改一次,所耗费的成本就越高,编码规范能节省这样的成本,并且能很好拓展升级原有系统功能,javascript编码规范也是开源社区大家约定俗成的规则！
    2024-06-06
  • 邮箱下拉自动填充选择示例代码附图

    邮箱下拉自动填充选择示例代码附图

    这篇文章主要介绍了邮箱下拉自动填充选择的具体实现,需要的朋友可以参考下
    2014-04-04
  • 基于JS组件实现拖动滑块验证功能(代码分享)

    基于JS组件实现拖动滑块验证功能(代码分享)

    拖动滑块验证功能在支付宝，微信各大平台都能见到这样的功能，那么基于js组件是如何实现此功能的呢？今天小编就给大家分享下js 拖动滑块 验证功能的实现代码,需要的朋友参考下吧
    2016-11-11
  • 小程序云开发初探(小结)

    小程序云开发初探(小结)

    云开发是微信平台新开放的功能，为开发者提供集成了服务器，数据库和资源存储的云服务。这篇文章主要介绍了小程序云开发初探(小结)，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • IE JS编程需注意的内存释放问题

    IE JS编程需注意的内存释放问题

    在IE下的JS编程中，以下的编程方式都会造成即使关闭IE也无法释放内存的问题，下面分类给出
    2009-06-06
  • es6函数之严格模式用法实例分析

    es6函数之严格模式用法实例分析

    这篇文章主要介绍了es6函数之严格模式用法,结合实例形式分析了es6函数严格模式的定义、用法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • JSON格式的键盘编码对照表

    JSON格式的键盘编码对照表

    这篇文章主要介绍了JSON格式的键盘编码对照表,本文给出英文键名、对应数值和中文注释,需要的朋友可以参考下
    2015-01-01
  • js中如何对url进行编码和解码

    js中如何对url进行编码和解码

    这篇文章主要介绍了js中如何对url进行编码和解码问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-11-11
  • JS 实现发送短信验证码的“59秒后重新发送验证短信”功能

    JS 实现发送短信验证码的“59秒后重新发送验证短信”功能

    这篇文章主要介绍了JS 实现发送短信验证码的“59秒后重新发送验证短信”功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-08-08

最新评论