方法一：
1，wxml
<view wx:if="{{ scrollTop >= 300 }}" class='itemBox'></view>
<view class="{{scrollTop >= 300 ? 'topnavFixed' : 'proItem'}}">
<!-- 内容 -->
</view>
.proItem {
background: #ffffff;
z-index: 111;
padding-left: 35rpx;
height: 75rpx;
border-top: 1rpx solid #f5f5f5;
border-bottom: 1rpx solid #f5f5f5;
box-sizing: border-box;
}
.itemBox{
height: 75rpx;
}
.topnavFixed{
background: #ffffff;
z-index: 1111111;
position: fixed;
top: 0;
height: 75rpx;
width: 100%;
padding-left: 35rpx;
border-top: 1rpx solid #f5f5f5;
border-bottom: 1rpx solid #f5f5f5;
}
2，js
onPageScroll(e) {
console.log(e);
vartop = e.scrollTop;
this.setData({
scrollTop:top
})
},
注意：
此方法只适用于分类部分在顶部的位置，因为300是具体值，所以做不到兼容各个型号；
方法二：
1，整体布局代码
<scroll-view scroll-y='true' style='height:100%;' bindscroll="scroll">
<view>
<view class="container">
<view class='box' hidden='{{!hidFirstView}}'>
<view class='boxHeight'>
<!-- 轮播图 -->
<view class='banner'></view>
<!-- 四个大按钮 -->
<view class='buttonView'></view>
</view>
<!-- 商品分类 -->
<view wx:if="{{ scrollTop >= boxHeight }}" class='itemBox'></view>
<view class="{{scrollTop >= boxHeight ? 'topnavFixed' : 'proItem'}}">
</view>
<!-- 商品列表 -->
<view class='proList' data-id='{{ item.id }}' bindtap='a' wx:for="{{productList}}">
</view>
</view>
</view>
</scroll-view>
2，js代码
scroll:function(e){
this.setData({
scrollTop: e.detail.scrollTop
})
},
//根据元素id获取元素高度，若此处元素是数据渲染生成的，则需要在页面渲染完成之后执行此方法，不然页面没渲染完成获取的这个元素高度会是0
var query = wx.createSelectorQuery();
//选择id
query.select('.boxHeight').boundingClientRect(function (rect) {
that.setData({
boxHeight: rect.height
})
}).exec();
注意：
页面有的模块是经过请求数据后渲染出来的，此时若每个元素外层已经套了一层有固定高度的父元素，则 wx.createSelectorQuery 获取到 boxHeight 的高度就不会受渲染前后的影响；
若没有在外层套固定高度的父元素，此时 boxHeight 的高度就会受数据渲染速度影响。
建议：
要么，外层套一个有固定高度的父元素；
要么，在该请求数据接口成功的回调函数里使用 wx.createSelectorQuery；
文章来源：https://blog.csdn.net/weixin_42157001/article/details/93166305
网友评论