小程序实现简单吸顶效果
更新时间：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值,距离顶部多少吸顶
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了bootstrap select下拉搜索插件的使用方法，动态加载自己数据的二级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
使用TextRange获取输入框中光标的位置的代码...2007-03-03
下面小编就为大家带来一篇js判断登陆用户名及密码是否为空的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
下面小编就为大家分享一篇使用classList来实现两个按钮样式的切换方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
javascript实现将数字转成千分位的方法小结【5种方式】
这篇文章主要介绍了javascript实现将数字转成千分位的方法,结合实例形式分析了5种常用的数字转换的常用方法,涉及字符串与正则操作的相关技巧,需要的朋友可以参考下2016-12-12
layui加载数据显示loading加载完成loading消失的实例代码
今天小编就为大家分享一篇layui加载数据显示loading加载完成loading消失的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
在JavaScript代码中，多多少少会有判断语句。业务越复杂，逻辑就越复杂，判断就越多。今天给大家整理下JavaScript中代码里常会用到的那些判断，有需要的可以参考借鉴。2016-08-08
最近在开发在线代码编辑器的过程中频繁接触Range对象，由于跨浏览器的需求，使用到ie下TextRange对象和标准Dom Range对象。2009-10-10
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
这篇文章主要介绍了JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法,涉及javascript针对字符串的遍历、查找、正则匹配及转换等操作技巧,并附带完整demo源码供读者下载参考,需要的朋友可以参考下2016-08-08
这篇文章主要为大家详细介绍了XMLHttpRequest 同步请求和异步请求,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
最新评论