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


Posted in Javascript onJanuary 08, 2020

在.js文件中使用page的onPageScroll事件和scroll-view的scroll事件中产生卡顿 (setData 渲染会阻塞其它脚本执行,导致了整个用户交互的动画过程会有延迟), 所以使用wxs响应事件来实现吸顶效果。wxs响应事件基础库 2.4.4 开始支持,低版本需做兼容处理。

附上文档链接:wxs响应事件

吸顶效果

使用scroll-view组件实现滚动效果,页面和scroll-view组件的高度设成100%,当竖向滚动条大于等于导航到顶部距离时,导航变成固定定位,固定显示在顶部,反之,导航取消定位。

<!-- wxml文件 -->
<wxs module="scroll1" src="./scroll1.wxs"></wxs> <!-- 引入wxs文件 -->
<scroll-view bindscroll="{{scroll1.scrollEvent}}" data-top="{{navTop}}" style='height:100%;' scroll-y>
 <image src='/images/top_image.png' mode='aspectFill' class='nav-image'></image>
 <view class='navigation'>
  <view wx:for="{{navBarList}}" wx:key="">{{item}}</view>
 </view>
 <view class='div' wx:for="{{8}}" wx:key="">第{{index}}部分</view>
</scroll-view>
 
/* wxss文件 */
page{
 font-size: 30rpx;
 background: #fea;
 height: 100%;
}
.div{
 width: 100%;height: 500rpx;
}
.nav-image{
 width: 100%;height: 400rpx;
 vertical-align: middle;
}
.navigation{
 width: 100%;
 height: 100rpx;
 display: flex;
 justify-content: center;
 align-items: center;
 background: #fff;
 top:0;left:0; /*只有使用定位才起效果*/
}
.navigation view{
 padding: 15rpx 20rpx;
 margin: 0 20rpx;
}
//wxs文件
var scrollEvent = function (e, ins) {
 var scrollTop = e.detail.scrollTop;
 var navTop = e.currentTarget.dataset.top;
 if (scrollTop >= navTop) {
  ins.selectComponent('.navigation').setStyle({
   "position": 'fixed'
  })
 } else {
  ins.selectComponent('.navigation').setStyle({
   "position": 'static'
  })
 }
}
module.exports = {
 scrollEvent: scrollEvent
}
//js文件
Page({
 /**
  * 页面的初始数据
  */
 data: {
  navBarList: ['喜欢', '点赞', '收藏'],
  navTop:0, //导航距顶部距离
 },
 /**
  * 生命周期函数--监听页面加载
  */
 onLoad: function (options) {
  this.getNavTop();
 },
 /**
  * 获取导航距顶部距离
  */
 getNavTop() {
  var that = this;
  var query = wx.createSelectorQuery();
  query.select('.navigation').boundingClientRect(function (data) {
   that.setData({
    navTop: data.top,
   })
  }).exec();
 },
 })

渐变导航效果

当竖向滚动条滚动到指定位置时,出现导航条,导航条透明度也随滚动条位置发生变化。

<!-- wxml文件 -->
<wxs module="scroll2" src="./scroll2.wxs"></wxs>
<scroll-view bindscroll="{{scroll2.scrollEvent}}" style='height:100%;' scroll-y>
 <!-- 头部 -->
 <image src='/images/top_image.png' mode='aspectFill' class='nav-image'></image>
 <view class='nav-icon'>
  <navigator open-type='navigateBack' class='back-icon'></navigator>
 </view>
 <view class='nav-bar' style='opacity:0;'>
  <navigator open-type='navigateBack' class='back-icon'></navigator>
  <view>我是导航条</view>
 </view>
 <!-- 头部 END -->
 <view class='div' wx:for="{{8}}" wx:key="">第{{index}}部分</view>
</scroll-view>
/* wxss文件 */
page{font-size: 30rpx;background: rgba(200, 58, 57, 0.3);height: 100%;}
.div{width: 100%;height: 500rpx;}
.nav-image{width: 100%;height: 400rpx;vertical-align: middle;}
.nav-icon,.nav-bar{
 position: fixed;
 top: 0;left: 0;
 height: 120rpx;
}
.nav-bar{
 width: 100%;
 display: flex;
 align-items: center;
 background: #fff;
}
.back-icon{
 width: 100rpx;
 height: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
}
.back-icon::after{ /*利用伪类元素模拟出返回icon*/
 content: "";
 display: block;
 width: 25rpx;height: 25rpx;
 border-top: 5rpx solid #fff;
 border-left: 5rpx solid #fff;
 transform: rotate(-45deg);
}
.nav-bar .back-icon::after{border-color: #000;}
//wxs文件
var scrollEvent=function(e,ins){
 var scrollTop=e.detail.scrollTop;
 if(scrollTop>100){
  ins.selectComponent(".nav-icon").setStyle({
   "opacity":"0"
  })
  var dot = (scrollTop-100)/50;
  ins.selectComponent(".nav-bar").setStyle({
   "opacity": dot
  })
 }else{
  ins.selectComponent(".nav-bar").setStyle({
   "opacity": "0"
  })
  var dot = (100-scrollTop) / 50;
  ins.selectComponent(".nav-icon").setStyle({
   "opacity": dot
  })
 }
};
module.exports={
 scrollEvent: scrollEvent
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js jquery做的图片连续滚动代码
Jan 06 Javascript
Document 对象的常用方法
Jul 31 Javascript
一句话JavaScript表单验证代码
Aug 02 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
详解JS模块导入导出
Dec 20 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
js实现列表按字母排序
Aug 11 Javascript
微信小程序实现吸顶特效
Jan 08 #Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 #Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 #Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 #Javascript
你可能从未使用过的11+个JavaScript特性(小结)
Jan 08 #Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 #Javascript
js实现多个标题吸顶效果
Jan 08 #Javascript
You might like
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
JavaScript的面向对象(二)
2006/11/09 Javascript
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
浅析js封装和作用域
2013/07/09 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
vue iview实现动态路由和权限验证功能
2018/04/17 Javascript
Vue刷新修改页面中数据的方法
2018/09/16 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
Vue Router的手写实现方法实现
2020/03/02 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
Python操作CouchDB数据库简单示例
2015/03/10 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
python配置grpc环境
2019/01/01 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Python图像读写方法对比
2020/11/16 Python
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
金讯Java笔试题目
2013/06/18 面试题
外贸业务员求职信范文
2013/12/12 职场文书
12.4法制宣传日标语
2014/10/08 职场文书
查摆问题整改措施范文
2014/10/11 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
部门优秀员工推荐信
2015/03/24 职场文书
活着观后感
2015/06/03 职场文书
小学生家长意见
2015/06/03 职场文书
学校运动会简讯
2015/07/20 职场文书
python 进阶学习之python装饰器小结
2021/09/04 Python