微信小程序如何让导航随着滚动替换内容

最新推荐文章于 2022-08-19 11:13:10 发布

ACGuan

最新推荐文章于 2022-08-19 11:13:10 发布

阅读量1.4k

点赞数

分类专栏： Web前端文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/csdnlinyongsheng/article/details/82495900

版权

Web前端专栏收录该内容

85 篇文章

订阅专栏

这篇博客介绍了如何在微信小程序中实现导航栏随着页面滚动而动态替换内容。通过使用`scroll-view`组件和监听`scroll`事件，结合WXML、WXSS和JS文件中的数据绑定，动态更新导航标题，实现不同内容区域的平滑过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

nav.xml

-------------------------------------------------------------------------------------------------------------

<view class='navTitle'>{{navTitle}}</view>

<scroll-view scroll-y style="height: 1500rpx" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">

<view class='title'>{{title1}}</view>

<view class='title titleRed'>{{title2}}</view>

<view class='title titleOrange'>{{title3}}</view>

</view>

</scroll-view>

</view>

-------------------------------------------------------------------------------------------------------------

nav.wxss

-------------------------------------------------------------------------------------------------------------

.navTitle{width:100%;height:50px;background:#ccc;line-height:50px;padding-left:30rpx;color:green;position:fixed;top:0;z-index: 10;}

.title{height:1000rpx;background:green;padding-left:30rpx;margin-top:60px;}

.titleBottom{height:100rpx;}

.titleRed{background:red;}

.titleOrange{background:orange;}

.titlePink{background:pink;}

-------------------------------------------------------------------------------------------------------------

nav.js

-------------------------------------------------------------------------------------------------------------

Page({

/**

* 页面的初始数据

data: {

toView: 'red',

scrollTop: 0,

navTitle: "导航",

title1: "标题1",

title2: "标题2",

title3: "标题3"

/**

* 生命周期函数--监听页面加载

onLoad: function (options) {

scroll: function (e) {

// console.log(e)

// console.log(e.detail.scrollTop);

const scrollTop = e.detail.scrollTop;

var query = wx.createSelectorQuery();//创建选择器

var that = this;

console.log("滚动值：" + scrollTop);

query.selectAll('.title').boundingClientRect(function (rect) {

rect[0].title = "标题1"

rect[1].title = "标题2"

rect[2].title = "标题3"

// var title1 = rect[0].top;

rect[1].top = rect[1].top + 400;

rect[2].top = rect[2].top + 760;//可以调整

for(var i = 0; i < rect.length; i++)

{

if(scrollTop >= rect[i].top)

{

that.setData({

navTitle: rect[i].title

})

}

}).exec();

/**

* 生命周期函数--监听页面初次渲染完成

onReady: function () {

/**

* 生命周期函数--监听页面显示

onShow: function () {

/**

* 生命周期函数--监听页面隐藏

onHide: function () {

/**

* 生命周期函数--监听页面卸载

onUnload: function () {

/**

* 页面相关事件处理函数--监听用户下拉动作

onPullDownRefresh: function () {

/**

* 页面上拉触底事件的处理函数

onReachBottom: function () {

/**

* 用户点击右上角分享

onShareAppMessage: function () {

}

})