这篇“小程序如何实现简单吸顶效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“小程序如何实现简单吸顶效果”文章吧。
要求:
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.设置topcode>值,距离顶部多少吸顶
以上就是关于“小程序如何实现简单吸顶效果”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
