Wechat small program WXS to achieve ceiling effect

Time:2020-9-20

In the. JS file, when the onpagescroll event of page and the scroll event of scroll view are used, the execution of other scripts will be blocked by SetData rendering, resulting in the delay of the animation process of the whole user interaction. Therefore, WXS response event is used to achieve the topping effect. WXS response event base library 2.4.4 starts to support, and the low version needs to be compatible.

Attach document link: WXS response event

Ceiling effect

The scroll view component is used to achieve the scrolling effect. The height of the page and the scroll view component is set to 100%. When the vertical scroll bar is greater than or equal to the distance from the navigation to the top, the navigation becomes fixed positioning and is displayed on the top. Otherwise, navigation cancels positioning.

<! -- wxml file -- >
< WXS module = "scroll1" SRC =. / scroll1. WXS "> < / WXS > <! -- import WXS file -- >
<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 = > section {{index}} < / View >
</scroll-view>

 

/*Wxss file*/
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; / * only positioning works*/
}
.navigation view{
 padding: 15rpx 20rpx;
 margin: 0 20rpx;
}
//WXS file
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 file
Page({
 /**
  *Initial data of the page
  */
 data: {
  Navbarlist: ['like ',' like ',' collect '],
  navTop:0 , // navigation distance from top
 },
 /**
  *Life cycle function -- listening for page loading
  */
 onLoad: function (options) {
  this.getNavTop();
 },
 /**
  *Get navigation distance from top
  */
 getNavTop() {
  var that = this;
  var query = wx.createSelectorQuery();
  query.select('.navigation').boundingClientRect(function (data) {
   that.setData({
    navTop: data.top,
   })
  }).exec();
 },
 })

Gradient navigation effect

When the vertical scroll bar scrolls to the specified position, the navigation bar appears, and the transparency of the navigation bar changes with the position of the scroll bar.

<! -- wxml file -- >
<wxs module="scroll2" src="./scroll2.wxs"></wxs>
<scroll-view bindscroll="{{scroll2.scrollEvent}}" style='height:100%;' scroll-y>
 <! -- head -- >
 <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 > I am the navigation bar
 </view>
 <! -- head end -- >
 < view class ` div 'Wx: for = {8}} "Wx: key = > section {{index}} < / View >
</scroll-view>
/*Wxss file*/
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 {/ * using pseudo class elements to simulate returned 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 file
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
};

The above is the whole content of this article, I hope to help you in your study, and I hope you can support developeppaer more.