微信小程序wxs實(shí)現(xiàn)吸頂效果

來源：本站原創(chuàng)|時(shí)間：2020-01-10|欄目：JavaScript|點(diǎn)擊：次

在.js文件中使用page的onPageScroll事件和scroll-view的scroll事件中產(chǎn)生卡頓 (setData 渲染會(huì)阻塞其它腳本執(zhí)行，導(dǎo)致了整個(gè)用戶交互的動(dòng)畫過程會(huì)有延遲)，所以使用wxs響應(yīng)事件來實(shí)現(xiàn)吸頂效果。wxs響應(yīng)事件基礎(chǔ)庫 2.4.4 開始支持，低版本需做兼容處理。

附上文檔鏈接：wxs響應(yīng)事件

吸頂效果

使用scroll-view組件實(shí)現(xiàn)滾動(dòng)效果，頁面和scroll-view組件的高度設(shè)成100%，當(dāng)豎向滾動(dòng)條大于等于導(dǎo)航到頂部距離時(shí)，導(dǎo)航變成固定定位，固定顯示在頂部，反之，導(dǎo)航取消定位。

<!-- 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({
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
  navBarList: ['喜歡', '點(diǎn)贊', '收藏'],
  navTop:0, //導(dǎo)航距頂部距離
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function (options) {
  this.getNavTop();
 },
 /**
  * 獲取導(dǎo)航距頂部距離
  */
 getNavTop() {
  var that = this;
  var query = wx.createSelectorQuery();
  query.select('.navigation').boundingClientRect(function (data) {
   that.setData({
    navTop: data.top,
   })
  }).exec();
 },
 })

漸變導(dǎo)航效果

當(dāng)豎向滾動(dòng)條滾動(dòng)到指定位置時(shí)，出現(xiàn)導(dǎo)航條，導(dǎo)航條透明度也隨滾動(dòng)條位置發(fā)生變化。

<!-- 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>我是導(dǎo)航條</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
};

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

上一篇：js實(shí)現(xiàn)左右輪播圖

欄目：JavaScript

下一篇：Nodejs + Websocket 指定發(fā)送及群聊的實(shí)現(xiàn)

本文標(biāo)題：微信小程序wxs實(shí)現(xiàn)吸頂效果

本文地址：http://www.jygsgssxh.com/a1/JavaScript/9245.html

更多JavaScript

雷火电竞-中国电竞赛事及体育赛事平台

JavaScript

微信小程序wxs實(shí)現(xiàn)吸頂效果

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機(jī)閱讀