WeChat applet wxs to achieve ceiling effect

In the .js file, the ONPAGESCROLL event and the Scroll-View’s scroll event generates Carton (SetData rendering will block other script execution, resulting in a delay of the entire user interaction), so use WXS response Events to achieve the effect of ceiling. WXS Response Event Bastronomy 2.4.4 Start support, low version needs to be compatible.

Attached document link: WXS response event

Using the scroll-view component to implement rolling effect, page, and scroll The height of the -VIEW component is set to 100%. When the vertical scroll bar is larger than or equal to navigate to the top distance, the navigation becomes fixed positioning, fixed display at the top, in turn, navigation cancels.

     {{{{item}}           / * wxss file * / PAGE {font-size: #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 use positioning to get the effect * /}. 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
   
// js file Page ({/ ** * initial data * / DATA : {Navbarlist: [‘Like’, ‘Sitzing’, ‘Collection’], NAVTOP: 0, // Navigation Top Distance}, / ** * Lifecycle Function – Listening Page Load * / Onload: Function (Options ) {this.getnavtop ();}, / ** * Get the top distance of the navigation distance * / getnavtop () {var. = this;Var query = wx.createselectorQuery (); query.select (‘. navigation’). BoundingClientRect (Function (DATA) {That.SetData ({Navtop: Data.top,})}). EXEC ();},})
   
When the vertical scroll bar scrolls to the designated position, the navigation bar appears, the navigation bar transparency is also The rolling bar position changes.
   

I am navigation bar

       / * 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; left: iposit: 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 {/ * utilization Pseudo-element simulation returns icon * / content: ""; Display: block; width: 25rpx; height: 25rpx; border-top: 5rpx solid #ff; 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 = {scrollevent: scrollevent};      The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Clouds.                      
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment