微信小程序滚动到某个位置添加class效果。
<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. wx.getLocation(多与wx.openLocation一起用) 获取当前的精度.纬度.速度.不需要授权.当type设置为gcj02 返回可用于w ...
- 微信小程序-获取当前城市位置及再次授权地理位置
微信小程序-获取当前城市位置 1. 获取当前地理位置,可通过wx.getLocation接口,返回经纬度.速度等信息; 注意---它的默认工作机制: 首次进入页面,调用该api,返回用户授权结果,并保 ...
- 微信小程序滚动tab的实现
微信小程序滚动tab的实现 1.目的:为了解决滚动版本的tab,以及实现虹吸效果. 2.方案:自己动手写了一个Demo,用于测试实现如上的效果.其代码有做参考,在这里先声明.具体的参照如下:重庆大学二 ...
- 微信小程序(13)--页面滚动到某个位置添加类效果
微信小程序页面滚动到某个位置添加类,盒子置顶效果. <!-- vh,是指CSS中相对长度单位,表示相对视口高度(Viewport Height),1vh = % * 视口高度 --> &l ...
- 微信小程序滚动动画,点击事件及评分星星制作!
前言 小程序上线刷爆了朋友圈,但是最近渐渐消沉了,很少有动静!最近公司项目需要,体验了一下微信小程序,制作了几个功能,布局感觉很简单,但是交互和动画等写起来确实很费劲,主要是因为他不能操作DOM,只能 ...
- 微信小程序-滚动Tab选项卡
前言:今天呢 给大家详细讲解一下滚动Tab选项卡:左右可滑动切换的效果,希望对大家做项目时候有用! 以前也遇到过这个,但是没有做记录.转载来源于:https://www.jianshu.com/p/9 ...
- 微信小程序滚动Tab选项卡:左右可滑动切换
最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当 ...
- 微信小程序之获取当前位置经纬度以及地图显示
最近刚开始接触微信小程序,在弄懂其结构以及相关接口之后,准备着手实现一个小程序,功能包括--获取用户当前位置的经纬度,在地图上查看位置,通过地图获取不同位置的经纬度. 微信小程序的主体部分包括: 新增 ...
- 微信小程序-滚动消息通知
写在前面: 微信小程序学的不太多,做了一个简单的项目,回来很快时间内把在深圳两天的房租给赚回来了. 这次我主要想总结一下微信小程序实现上下滚动消息提醒,主要是利用swiper组件来实现,swiper组 ...
随机推荐
- Netstat- Linux必学的60个命令
1.作用 检查整个Linux网络状态. 2.格式 netstat [-acCeFghilMnNoprstuvVwx][-A][--ip] 3.主要参数 -a--all:显示所有连线中的Socket. ...
- mysql权限修改记录
select user, password, host from mysql.user; GRANT ALL PRIVILEGES ON *.* TO 'root'@'147.114.169.197' ...
- uoj349 即时战略
题意:这是一道交互题.交互库中有一棵树.一开始只有1节点已知.需要在T次询问内使得n个节点都已知.一次询问explore(x,y),返回从x到y路径上第一个点,并将返回点标记为已知. 数据有区分. 标 ...
- 前端面试题之一JAVASCRIPT(算法类)
一.JS操作获取和设置cookie //创建cookie function setcookie(name, value, expires, path, domain, secure) { var co ...
- IOS学习笔记57--IOS7状态栏适配(二)
上一遍文章通过XIB的设置达到了状态栏和view重合的问题,这一篇我们讲一讲网传的修改window frame方法. 先上步骤: 第一:在appdeletage里面 添加如下代码: if ( ...
- 不同浏览器Cookie有效期问题
昨天项目迁移了测试服务器,之后奇怪的问题出现了. IE.谷歌无法登陆,火狐可以登陆. 这个项目先后部署过两个测试服务器.一台正式服务器,登陆都是正常的,这次却突然出现这种奇怪的问题,很是纠结. 通过查 ...
- Thrift(PHP)入门无错篇章(一)
一.安装篇 博主注:截至2017-10-10,官网上thrift最新版0.10.0一直无法成功编译.所以,请选择0.9.3版本,避免走各种弯路: wget http://apache.fayea.co ...
- js 获取字符串中某字符第二次出现的下标
var res = "a-b-c-d";var index = find(res,'-',1); //字符串res中第二个‘-’的下标 var ress = res.substri ...
- [转]基于MefBootstrapper的Bootstrapper
public class Bootstrapper : MefBootstrapper { ModuleCatalog moduleCatalog; protected overr ...
- [CQOI2011]放棋子--DP
题目描述: 输入格式 输入第一行为两个整数n, m, c,即行数.列数和棋子的颜色数.第二行包含c个正整数,即每个颜色的棋子数.所有颜色的棋子总数保证不超过nm.N,M<=30 C<=10 ...