溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在.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
};
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
