欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-09-02 10:10:24
在.js文件中使用page的onpagescroll事件和scroll-view的scroll事件中产生卡顿 (setdata 渲染会阻塞其它脚本执行,导致了整个用户交互的动画过程会有...

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

附上文档链接:

吸顶效果

使用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
};

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