<scroll-view scroll-y="true" style="height:100vh;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"  scroll-top="{{scrollY}}">
<view>
假设这里有一块内容
</view>
<view class="{{scrollTop>200 ? 'topnav' : ''}}">
topnav是希望页面滚动到某出添加的类。变成置顶导航。
</view>
。。。。
</scroll-view>

页面结构大致如上。

下面是js

 //滚动监听
scroll: function (e) { // console.log(e) ;
var that = this,scrollTop=that.data.scrollTop;
that.setData({
scrollTop:e.detail.scrollTop
})
// console.log('e.detail.scrollTop:'+e.detail.scrollTop) ;
// console.log('scrollTop:'+scrollTop)
}

data里面先定义一下scrollTop.

其实不是很难╮(╯-╰)╭

微信小程序滚动到某个位置添加class效果。的更多相关文章

  1. 微信小程序之获取用户位置权限(拒绝后提醒)

    微信小程序获取用户当前位置有三个方式: 1. wx.getLocation(多与wx.openLocation一起用) 获取当前的精度.纬度.速度.不需要授权.当type设置为gcj02 返回可用于w ...

  2. 微信小程序-获取当前城市位置及再次授权地理位置

    微信小程序-获取当前城市位置 1. 获取当前地理位置,可通过wx.getLocation接口,返回经纬度.速度等信息; 注意---它的默认工作机制: 首次进入页面,调用该api,返回用户授权结果,并保 ...

  3. 微信小程序滚动tab的实现

    微信小程序滚动tab的实现 1.目的:为了解决滚动版本的tab,以及实现虹吸效果. 2.方案:自己动手写了一个Demo,用于测试实现如上的效果.其代码有做参考,在这里先声明.具体的参照如下:重庆大学二 ...

  4. 微信小程序(13)--页面滚动到某个位置添加类效果

    微信小程序页面滚动到某个位置添加类,盒子置顶效果. <!-- vh,是指CSS中相对长度单位,表示相对视口高度(Viewport Height),1vh = % * 视口高度 --> &l ...

  5. 微信小程序滚动动画,点击事件及评分星星制作!

    前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...

  6. 微信小程序-滚动Tab选项卡

    前言:今天呢 给大家详细讲解一下滚动Tab选项卡:左右可滑动切换的效果,希望对大家做项目时候有用! 以前也遇到过这个,但是没有做记录.转载来源于:https://www.jianshu.com/p/9 ...

  7. 微信小程序滚动Tab选项卡:左右可滑动切换

    最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当 ...

  8. 微信小程序之获取当前位置经纬度以及地图显示

    最近刚开始接触微信小程序,在弄懂其结构以及相关接口之后,准备着手实现一个小程序,功能包括--获取用户当前位置的经纬度,在地图上查看位置,通过地图获取不同位置的经纬度. 微信小程序的主体部分包括: 新增 ...

  9. 微信小程序-滚动消息通知

    写在前面: 微信小程序学的不太多,做了一个简单的项目,回来很快时间内把在深圳两天的房租给赚回来了. 这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组 ...

随机推荐

  1. Luogu P3802 小魔女帕琪(期望)

    P3802 小魔女帕琪 题意 题目背景 从前有一个聪明的小魔女帕琪,兴趣是狩猎吸血鬼. 帕琪能熟练使用七种属性(金.木.水.火.土.日.月)的魔法,除了能使用这么多种属性魔法外,她还能将两种以上属性组 ...

  2. ThinkPHP引用第三方库

    Thinkphp引用第三方库的方法例如引用购物车:在项目Home目录下,新建一个文件夹(以下是我自己的demo) Tool文件夹,在Tool文件夹中创建Tool.class.php文件.这个和你控制器 ...

  3. naptime

    naptime 有一个长度为n的序列\(a_i\),首尾相接组成了一个环,现在要在这个环上选出若干个区间,使区间长度之和恰好为b,然后忽略区间的顺时针开头元素,权值累加区间中所有的数字,问权值的最大值 ...

  4. 动软DbHelperSQL

    using System; using System.Collections; using System.Data; using System.Data.SqlClient; using System ...

  5. logger----->模块级别的函数

    #_author:star#date:2019/11/6#logger----->模块级别的函数#文件与屏幕同时显示日志信息import logginglogger=logging.getLog ...

  6. 使用DUILIB建立项目

    使用DUILIB加载XML界面 这篇主要目的就是教给大家怎样在自己的工程中加载XML界面,这是最基本的应用,对于界面控件响应啥的,我就不讲了,在大家懂了这个之后,我会给大家一个其它人写的博客,再看他的 ...

  7. 洛谷P3376【模板】网络最大流  Dinic模板

    之前的Dinic模板照着刘汝佳写的vector然后十分鬼畜跑得奇慢无比,虽然别人这样写也没慢多少但是自己的就是令人捉急. 改成邻接表之后快了三倍,虽然还是比较慢但是自己比较满意了.虽然一开始ecnt从 ...

  8. 正则获取html标签字符串中图片地址

    html标签字符串: var htmlStr = "<div class='testClass'><img=http://www.chinanews.com/part/ho ...

  9. python mysql数据库中 json的存储

    首先数据库里的字段类型需要设置为json: 存储这个json时需要把这个json变为字符串,而且是最外层为单引号,内部字符串为双引号!如图:  所以python脚本中这个字段的字符串应该这样写: 得出 ...

  10. 转-Pycharm中运行Python代码的几种方式

    转自:Pycharm中运行Python代码的几种方式 在pycharm中的Python代码运行会出现各种奇葩的问题,比如,密码输入时不显示或没有提示,给我们带来一些麻烦,下面介绍几种代码运行的几种方式 ...