小程序滑到指定位置固定导航
之前在开发小程序的时候，有一个需求，页面滑倒指定位置时固定某一块内容，在此做个记录：
思路：1、监听滚动条的位置；
2、获取指定位置元素的高度；
3、当滚动条的高度大于指定元素的高度时，添加固定定位样式；
最终效果图如下：
代码部分：
1 <view class="container" style="{{scrollTop > bannerHeight ? 'padding-top:170rpx' : ''}}"> 2 <view class="input_box flex-x"> 3 <input placeholder="搜索"></input> 4 </view> 5 6 <swiper class="swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular> 7 <block wx:for="{{background}}" wx:key="*this"> 8 <swiper-item> 9 <image class="swiper-item {{item}}" src=""></image> 10 </swiper-item> 11 </block> 12 </swiper> 13 14 <view class="{{scrollTop > bannerHeight ? 'nav_fixed' : ''}}"> 15 <view class="nav flex-x"> 16 <view class="active">推荐</view> 17 <view>新闻动态</view> 18 <view>知识库</view> 19 </view> 20 </view> 21 22 <view class="list flex-x" wx:for="{{20}}" wx:key="index"> 23 内容内容内容内容内容内容内{{index + 1}} 24 </view> 25 26 </view>
1 page { 2 background-color: #f2f2f2; 3 font-size: 28rpx; 4 color: #333; 5 } 6 7 .flex-x { 8 display: flex; 9 align-items: center; 10 } 11 12 .container { 13 padding: 90rpx 30rpx 0; 14 box-sizing: border-box; 15 } 16 17 .input_box { 18 width: 100%; 19 height: 90rpx; 20 background-color: #fff; 21 position: fixed; 22 top: 0; 23 left: 0; 24 z-index: 99; 25 padding: 0 30rpx; 26 box-sizing: border-box; 27 } 28 29 input { 30 height: 60rpx; 31 background-color: #f0f0f0; 32 border-radius: 30rpx; 33 flex-grow: 1; 34 text-align: center; 35 } 36 37 image { 38 width: 100%; 39 height: 100%; 40 } 41 42 .demo-text-1 { 43 background-color: red; 44 } 45 46 .demo-text-2 { 47 background-color: pink; 48 } 49 50 .demo-text-3 { 51 background-color: green; 52 } 53 54 .nav { 55 width: 100%; 56 height: 80rpx; 57 justify-content: space-around; 58 border-bottom: 2rpx solid #f2f2f2; 59 background-color: #fff; 60 } 61 62 .nav > view { 63 text-align: center; 64 color: #999; 65 } 66 67 .nav > view.active { 68 color: #333; 69 } 70 71 .list { 72 height: 160rpx; 73 background-color: pink; 74 margin-bottom: 2rpx; 75 } 76 77 .nav_fixed { 78 position: fixed; 79 top: 90rpx; 80 left: 0; 81 width: 100%; 82 height: 80rpx; 83 }
1 Page({ 2 3 /** 4 * 页面的初始数据 5 */ 6 data: { 7 background: ['demo-text-1', 'demo-text-2', 'demo-text-3'], 8 indicatorDots: true, 9 vertical: false, 10 autoplay: true, 11 interval: 2000, 12 duration: 500, 13 bannerHeight: 0, //banner高度 14 scrollTop: 0, //滚动条高度 15 }, 16 17 /** 18 * 生命周期函数--监听页面加载 19 */ 20 onLoad: function (options) { 21 // 获取swipre高度 22 wx.createSelectorQuery().select('.swiper').boundingClientRect((rect) => { 23 console.log('banner高度', rect.height) 24 this.setData({ 25 bannerHeight: rect.height 26 }) 27 }).exec() 28 }, 29 30 /** 31 * 监听滚动条 32 */ 33 onPageScroll: function(e) { 34 console.log('滚动条位置', e.scrollTop) 35 this.setData({ 36 scrollTop: e.scrollTop 37 }) 38 }, 39 40 /** 41 * 生命周期函数--监听页面初次渲染完成 42 */ 43 onReady: function () { 44 45 }, 46 47 /** 48 * 生命周期函数--监听页面显示 49 */ 50 onShow: function () { 51 52 }, 53 54 /** 55 * 生命周期函数--监听页面隐藏 56 */ 57 onHide: function () { 58 59 }, 60 61 /** 62 * 生命周期函数--监听页面卸载 63 */ 64 onUnload: function () { 65 66 }, 67 68 /** 69 * 页面相关事件处理函数--监听用户下拉动作 70 */ 71 onPullDownRefresh: function () { 72 73 }, 74 75 /** 76 * 页面上拉触底事件的处理函数 77 */ 78 onReachBottom: function () { 79 80 }, 81 82 /** 83 * 用户点击右上角分享 84 */ 85 onShareAppMessage: function () { 86 87 } 88 })
