小程序实现简单吸顶效果

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

要求:

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>值,距离顶部多少吸顶

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

赞 (0)

相关推荐

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

    在.js文件中使用page的onPageScroll事件和scroll-view的scroll事件中产生卡顿 (setData 渲染会阻塞其它脚本执行,导致了整个用户交互的动画过程会有延迟), 所以使用wxs响应事件来实现吸顶效果.wxs响应事件基础库 2.4.4 开始支持,低版本需做兼容处理. 附上文档链接:wxs响应事件 吸顶效果 使用scroll-view组件实现滚动效果,页面和scroll-view组件的高度设成100%,当竖向滚动条大于等于导航到顶部距离时,导航变成固定定位,固定显示在

  • 小程序自定义模板实现吸顶功能

    小程序自定义模板实现吸顶功能

    本文实例为大家分享了小程序实现吸顶功能的具体代码,供大家参考,具体内容如下 //如图所示----这里用了自定义组件实现了小程序吸顶功能 //WXML <view class="i-sticky-demo"> <i-sticky scrollTop="{{scrollTop}}"> <i-sticky-item i-class="i-sticky-demo-title"> <view slot="

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

    微信小程序实现吸顶特效

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

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

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

    目录 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>

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

    微信小程序实现简单的吸顶效果

    本文实例为大家分享了微信小程序实现简单吸顶效果的具体代码,供大家参考,具体内容如下 需求:进入页面后首先看到banner布局,然后是tab切换栏以及页面内容,当页面滚动到一定距离后,tab切换栏始终固定在顶部 wxml部分代码如下: <!--pages/test/test.wxml--> <view style="padding-bottom:30rpx;position:fixed;top:0;width:100%;background:#2ea7e0;">

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

    本文实例为大家分享了微信小程序实现吸顶效果的具体代码,供大家参考,具体内容如下 吸顶效果思路: 1.首先获取 Tab 栏与顶部的距离: 2.监听页面滚动事件 onPageScroll,判断 Tab 栏是否滚动到顶部: 3.当 Tab 栏滚动到顶部时,添加吸顶样式,实现效果. Page({   data: {     navbarInitTop: 0, //导航栏初始化距顶部的距离     isFixedTop: false, //是否固定顶部   },     /**    * 生命周期函数--

  • 微信小程序实现列表滚动头部吸顶的示例代码

    本文介绍了小程序头部吸顶的实现代码示例,分享给大家,也给自己留个笔记 demo 地址: https://github.com/iotjin/Jh_weapp 效果图: 吸顶主要是 position: sticky; .header { background: rgb(230, 230, 230); height: 25px; line-height: 25px; padding-left: 30rpx; font-size: 13px; align-items: center; position

  • 小程序实现简单吸顶效果

    小程序实现简单吸顶效果

    本文实例为大家分享了小程序实现吸顶效果的具体代码,供大家参考,具体内容如下 要求: 1.使页面某一区域始终显示在页面的最顶端2.页面流畅不卡顿 初始效果如图: 最终效果: 1.wxml部分代码如下: <view class="search">搜索框</view> <view class="banner">banner</view> <view class="content">   <

  • 微信小程序 利用css实现遮罩效果实例详解

    微信小程序 利用css实现遮罩效果实例详解

    微信小程序 利用css实现遮罩效果实例详解 实现效果图: 如图所示,使用css实现小程序的遮罩效果,代码如下 js文件代码: //index.js //获取应用实例 var app = getApp() Page({ data: { flag: false }, a: function(){ this.setData({flag: false}) }, b: function(){ this.setData({flag: true}) } }) wxss文件代码: .b1{position:fi

  • 微信小程序实现验证码获取倒计时效果

    微信小程序实现验证码获取倒计时效果

    本文实例为大家分享了微信小程序实现获取验证码倒计时效果的具体代码,供大家参考,具体内容如下 wxml <button disabled='{{disabled}}' data-id="2" bindtap="getVerificationCode"> {{time}} </button> js var interval = null //倒计时函数 Page({ data: { date:'请选择日期', fun_id:2, time: '获

  • 详解微信小程序用定时器实现倒计时效果

    平常在微信小程序开发的时候,因项目的需求,倒计时必不可少,下面主要讲解定时器在微信小程序中的使用. 这里要先声明一点的就是,该篇主要实现倒计时功能,而且实现是时长较短的倒计时,其他的优化什么的不作主要考虑. 如果实现简单的60s倒计时效果,我们可直接使用setInterval即可,但是在微信小程序中,我们需要用微信小程序的语法,这时就会遇到一个难题,那就是怎么关闭定时器的问题,下面给出实例. WXML代码 <view class='countDown'>倒计时:<text style='

  • 微信小程序实现单选选项卡切换效果

    微信小程序实现单选选项卡切换效果

    这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法,供大家参考,具体内容如下 效果如图: wxml: <view class="item" wx:for="{{data}}" wx:for-item="item" wx:for-index="idx" data-idx="{{idx}}" bindtap="chooseItem"> <view class=

  • 微信小程序页面缩放式侧滑效果的实现代码

    先给大家展示下效果图,大家感觉不错,请参考实现代码: 实现原理:点击按钮,往需要动画的div中添加或移除拥有动画效果的class. 由于微信小程序中不能操作page这个根节点,所以,只有用一个div(view)来模仿page根节点. 1.结构 <view class='page {{isFix?"pageShow":"pageHide"}}' > <view class='header'> <view class='h-toggle i

  • 微信小程序导航栏跟随滑动效果的实现代码

    微信小程序导航栏跟随滑动效果的实现代码

    效果图 .wxml <view class='tabBar'> <view class='tabItem wx:if="{{tabClick===0?"click":""}}"' bindtap='clickTab' data-index='0'>tab1</view> <view class='tabItem wx:if="{{tabClick===1?"click":&q

  • 微信小程序实现卡片层叠滑动效果

    微信小程序实现卡片层叠滑动效果

    本文实例为大家分享了微信小程序之卡片层叠滑动效果的具体代码,供大家参考,具体内容如下 代码: js: // index/gun/jsSwiper2/jsSwiper2.js Page({ /** * 页面的初始数据 */ data: { startX: 0, endX: 0, iCenter: 3, datas: [{ id: 1, zIndex: 2, opacity: 0.2, left: 40, iamge: "../../images/1.jpg", animation: nu

随机推荐