微信小程序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中confirm,alert,prompt函数区别分析
Jan 17 Javascript
img onload事件绑定各浏览器均可执行
Dec 19 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
JavaScript中实现map功能代码分享
Jun 11 Javascript
Javascript实现的简单右键菜单类
Sep 23 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 Javascript
使用node搭建自动发图文微博机器人的方法
Mar 22 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 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
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
jquery 图片轮换效果
2010/07/29 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
高效率JavaScript编写技巧整理
2013/08/23 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
2014/02/12 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
AugularJS从入门到实践(必看篇)
2017/07/10 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
Python科学计算环境推荐——Anaconda
2014/06/30 Python
Python是编译运行的验证方法
2015/01/30 Python
基于进程内通讯的python聊天室实现方法
2015/06/28 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
Python的3种运行方式:命令行窗口、Python解释器、IDLE的实现
2020/10/10 Python
如何解决python多种版本冲突问题
2020/10/13 Python
Python 微信公众号文章爬取的示例代码
2020/11/30 Python
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
出国留学自荐信
2013/10/25 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python